Cannot add css style to Slider

[crevete]

Issue reported by @flyinghang:

I am trying to change the width of a Slider to "100%" like this:

<b3:Slider min="0" value="30" max="100" addStyleNames="my-slider"/>

and the css is like: .my-slider { width: 100% !important; margin-left: 24px; }

gwtbootstrap3 0.9.3 with GWT 2.7

the css is not working, it seems it applies to the generated Input element (invisible) not the Div with class "slider". Not sure if this is an already reported issue but it seems that I can't customize the widget in Ui Binder.

Any comments to this issue?

[crevete]

@flyinghang This is not possible via uiBinder. Because when setting attributes with uiBinder, the slider element (input) is not attached to DOM yet. So when you set a style name (class) to the slider, it is applied to the input element rather than the generated div element. If you want it possible, you have to create an issue on bootstrap-slider, but not here.

Actually, the only thing we can do, is to override the getStyleElement method, so that addStyleName, setStyleName and removeStyleName methods will work as expected. This means you can call theses methods AFTER the slider attached to DOM.

By this way, before the slider is attached to DOM, theses methods apply style name to input element; once the slider is attached to DOM, they will apply style name to the generated div element. As the slider provides an API to get the generated div element, we can implement this "properly".

[flyinghang]

Thank you @crevete for the enhancements. I've updated my code to manually call bootstrap-slider API to get the DIV element on the Slider and set the css styles after it's attached to DOM. It works like a charm! This will be my temporarily workaround before next release of gwtbootstrap3-extras.