How to set css error-styles programatically on a TextBox


Tags: java,css,gwt

Problem :

Why can't I apply custom css styles to a single TextBox?

I'm trying to set some error styles on a single TextBox. What's wrong with the following implementation?

init:

static final String STYLES = ErrorRes.INSTANCE.css().style();

@UiField TextBox box;
box.setStylePrimaryName(STYLES);

Resource interface

interface ErrorRes extends ClientBundle {
    static final ErrorRes INSTANCE = GWT.create(ErrorRes.class);

    @Source("Error.css")
    Style css();

    interface Style extends CssResource {
        @ClassName("gwt-TextBox-error")
        String style();
    }
}

Error.css

.gwt-TextBox-error {
     border: 1px solid red !important;
}


Solution :

If you whant to get gwt-TextBox-error style name on widget, you need set box.setStylePrimaryName("gwt-TextBox"); - it's by default. And when error occured use box.setStyleDependentName("error", true); HTML will be class="gwt-TextBox gwt-TextBox-error". And to clear error style, use box.setStyleDependentName("error", false);

OR

You can use addStyleName("gwt-TextBox-error") and removeStyleName("gwt-TextBox-error") in a same way.

---UPDATE---

So, I tryed to run your case and it works well. At the first of all you need inject css from resources to page in runtime:

ErrorRes.INSTANCE.css().ensureInjected();

I use it in the begining of onModuleLoad()

Then, to add error style use: box.addStyleName(STYLES); and box.removeStyleName(STYLES); to remove it.

You can't use pair setStylePrimaryName() and setStyleDependentName() with bundled css becouse css name will be obfuscated.


    CSS Howto..

    How can I make my CSS update consistently? [closed]

    how to arrange the sequence of js and css files in webpage?

    How to add external CSS to HTML 'style'

    how to position heading in the center of the page

    How to differentiate between high-res phone and desktop using css or js or anything else?

    How to get selected table cells background colour?

    how do you link css to a jade file?

    How to hide the toolbar in Chrome for Android tablets for a 100% high website

    CSS how to have two divs to the right of one div but not beside each other

    How to apply css styles to dynamic JavaScript array?

    How can I change the css of this when I click on anything but this?

    Slideshow using background images with navigation and captions

    How to fix CSS background position

    CSS how to not use style

    how to reference background image urls in css through config entrys

    How to trim off Image in CSS?

    Webpack bundle does not show css

    How to define dynamic height in css (or html)?

    How to draw outside borders only in thead

    How does Media Queries Reacts

    Jquery: how to get menu to expand towards the right instead of the left

    How to know where a CSS error occurred in dynamic content or how to stop the script upon CSS error

    How to apply same event to multiple buttons?

    How to style CSS role

    How would I get my horizontal navigation bar to span the full width?

    how to: dynamic navigation bar size depending on dynamic image size?

    How can I setup a border inside the div

    How to get 'hover' and 'active' states working with CSS and HTML?

    How to CSS style a div to look like a GUI control box with a label?

    How to draw a responsive shape [closed]