0

Programmatically change css of Toolbar overflowpopup button

asked 2020-07-29 02:21:30 +0800

54patman gravatar image 54patman
13 3

Hi,

I have looked everywhere but I'm not sure this can be done easily in the Java code, I'm using Richlets.

The Toolbar overflowpopup button is too close to the right edge and I want to add a few more pixels and I found the CSS to be:

.z-toolbar-overflowpopup-on .z-toolbar-overflowpopup-button {right: 5px;}

but from the code I can't figure out the selector to change just the button with the toolbar.setStyle().

I assume I can use the Style component and setContent(), but I would like to know how to access sub components.

Thanks

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2020-07-29 11:00:05 +0800

cor3000 gravatar image cor3000
6280 2 7

updated 2020-07-29 11:01:37 +0800

First being said ... everything possible in a ZUL file is also possible from java code. ZUL files are simply parsed and executed using the same java API methods, which are available from a Composer or Richlet.

toolbar.setStyle() will only set styles on the root element of a component, so your guess is correct you can't use this 'shortcut'.

Instead you're right you can use the style component ... and set the content dynamically.

I wonder what's stopping you from doing so?

Style style = new Style();
style.setContent(".z-toolbar-overflowpopup-on>.z-toolbar-overflowpopup-button {right: 10px;}");
style.setPage(page);

I'd suggest moving your custom styles into a css file, and simply include it instead of adding CSS code from java code.

Or just build a custom theme.

link publish delete flag offensive edit

Comments

@cor3000 thanks for the quick reply. In the end I did exactly what you mentioned with Style component as a workaround, but I guess that's the actual solution. Yes making a CSS file is my next step.

54patman ( 2020-07-29 20:46:50 +0800 )edit

just a hint in case you want to add a css file globally don't use the Style component. I'd suggest configuring it in your lang-addon.xml in a <stylesheet>-element

cor3000 ( 2020-07-30 10:10:36 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-07-29 02:21:30 +0800

Seen: 8 times

Last updated: Jul 29 '20

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More