Can I set the id for a SKUI control?

[GWydouw]

I like to set the id for a control in SKUI, so I can change the style in the CSS seperate from other controls of the same type? Is this possible?
I tried the with setting the name but this doesn't work.

[GWydouw]

I found a workaround by asking the ui_id property of the control and let ruby change my css file to use this ui_id + 'ui' name. I think there should be an easier way?

[thomthom]

It's not possible to set the ID of the SKUI controls. They need to be they way they are in order to keep Ruby and JS in sync.
Having unique styling for individual controls wasn't really what SKUI was designed for.

It might be doable to add a class and use that as a hook, but that would probably require some internal prefixing of the class name in order to prevent clashes.

What kind of styling are you doing? Maybe there is a different approach to this, like exposing a background property. Assigning ID and class names to controls starts to move towards treating them as HTML - where as the purpose of this framework was to abstract that away.

[GWydouw]

I try to set the background image and the opacity of a listbox, but it's just for one listbox and not for all the list boxes.

[thomthom]

Does CSS even let you set the background image for a listbox? Styling input controls is something that is very inconsistent from browser to browser.

Adding opacity to the generic Control class should be easy.

Background image for listbox, that sounds a bit odd to me. Why do you want that? Would it not make the content harder to read?

[GWydouw]

Yes it's possible I have an hack at this moment. I read the ui_id from the control and tweak the css to this ui_id + '_ui' and reload the css theme and it works.
What we try to do is making something that looks and works like the detail button on the Sketchup Scene dialog (top right icon). An image which when you click on it has a fly out dropdown window. Now I can do it with pacing an image and a listbox on top of each other with the listbox having a lower z-index and an opacity of 0. If I can set the background image I don't need two controls. But at least I need to set the opacity separate from other list boxes.

[thomthom]

Ah! This explains it. I think I would rather try to have a dropdown button control to deal with that. Setting opacity and background images is more of a workaround. These overall description of the goals is useful for feature request - as it's better to try to implement a proper solution instead of workarounds.

Now, does it really have to be a dropdown list? It's just that I think it can be awkward to force that to behave as desired. What about just using a DIV that pops up with the menu items?
(There isn't any way to create custom menus in JS, is it?)

[GWydouw]

With the hack it works just like I want.
The nice thing about the drop down is that that when it's clicked it's linked to the original web dialog and fly out of the browser window. It's only this fly out effect which I need.
A div that pops up it always inside the browser window.

[thomthom]

Ah, that's a good point. Do you have a screenshot of what it looks like?
(Just drag and drop it in the comment box.)

[GWydouw]