NG Ti: Different styles to different (db)treeview components

Forum to discuss the new web client version of Servoy.

NG Ti: Different styles to different (db)treeview components

Postby huber » Wed Aug 31, 2022 10:33 am

To apply different styles to different (db)treeview components [servoyextra-dbtreeview], in NG Classic I can style the component by using the name property.

For example, property name is set to menu, then the style

Code: Select all
[name = menu] .dbtreeview ul.fancytree-container {
   background-color: #f5fbfe;
}


is only applied to dbtreeviews having set the property name to menu.

This does not work anymore for NG Titanium. Does someone know how to use different styles in NG Ti for the dbtreeview components? Any hint is appreciated.
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: NG Ti: Different styles to different (db)treeview compon

Postby mboegem » Wed Aug 31, 2022 1:08 pm

Hi Robert,

A while ago, you've asked about styling of the TiNG treeview component.
From that, I know that the underlying component is different and therefor also the DOM/classes of the component.

Easiest way is to use the browser's inspector and see what the target is in this component.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: NG Ti: Different styles to different (db)treeview compon

Postby huber » Wed Aug 31, 2022 3:21 pm

Hi Marc

I did that and can style the treeview component. But on different forms I have to style them differently. The browser's inspector is no help in finding an answer to that, at least I didn't find it.

Regards,
Robert Huber
7r AG, Switzerland
SAN Developer
http://www.seven-r.ch
User avatar
huber
 
Posts: 516
Joined: Mon May 14, 2012 11:31 pm

Re: NG Ti: Different styles to different (db)treeview compon

Postby mboegem » Thu Sep 01, 2022 1:07 pm

Hi Robert,

I can see what you're trying to achieve.
The generic solution is kind of simple.
You can nest form-specific styling in a form style class.
Something like this:
Code: Select all
.menu-tree {
   .dbtreeview ul.fancytree-container {
      background-color: #f5fbfe;
   }
}


Then you will add/set 'menu-tree' as the styleclass of the particular form.

I can imagine that you have some base styling for the different treeviews, which can be global styling (no nesting) or nested in a separate block, referencing multiple form-styles
Code: Select all
.menu-tree,
.another-tree,
.3rd-tree {
   /** base styling */
}


Hope this helps

note: of course you still need to replace the fancy-tree style class with the TiNG equivalent. ;-)
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 6 guests