CODEWITHSUNDEEP
cssgwtuibinder
TomZ
TomZ

Reputation: 7

GWT button background not working

I am new to GWT/uiBinder (latest version of GWT and testing under latest Eclipse) and really puzzled. My CSS for buttons is ...

/* --button-- */
.gwt-Button {
    font-size: 16px;
    font-weight: normal;
    color: #0F0;
    background: #F00;    /* this gets ignored */
}

The background does nothing, the rest works.

I have tested that this CSS entry does something by changing the color and seeing that it works. I have also tried "background-color" (I have seen both in various docs). The background never changes.

I also tested a gwt-TextBox as follows and it works just fine.

/* --text box-- */
.gwt-TextBox {
    font-size: 16px;
    font-weight: normal;
    color: #0F0;
    background: Beige;
}

Note: I know that sometimes while testing you have to refresh the web page to see your changes.

Note: I can set the button background by using a CSS entry called "myButton" and using styleName='myButton' it in the uiBinder entry.

Note: The button is in a Layer in a LayoutPanel in a north:DockLayoutPanel in an east:DockLayoutPanel.

Help!

Upvotes: 0

Views: 4763

Answers (4)

Ancel Litto
Ancel Litto

Reputation: 53

there is a simpler way you need to remove the gwt-Button style and then add whatever color you like `

Button button=new Button();
button.removeStyleName("gwt-Button");
button.getElement().getStyle().setbackgroundColor("#F00");
//incase you need to remove the default border style aswell
button.getElement().getStyle().setBorderStyle(BorderStyle.NONE);

`

Upvotes: 0

user2217422
user2217422

Reputation: 11

You need to include this line before you make any changes to the background of gwt-Button

background-image:initial !important;

The problem you're having is that you're trying to set a background color, when gwt-Button uses a background image, so the image goes over your background color, making it seem like your css is being ignored.

Upvotes: 1

Abhijith Nagaraja
Abhijith Nagaraja

Reputation: 3380

I think this should solve your problem

.gwt-Button {
         font-size: 16px;
         font-weight: normal;
         color: #0F0;
         background: #F00 !important; 
}

Upvotes: 2

dting
dting

Reputation: 39307

https://stackoverflow.com/a/7833358/635411

You can use a more specific selector like the other answer suggests:

/* --button-- */
button.gwt-Button {
    font-size: 16px;
    font-weight: normal;
    color: #0F0;
    background: #F00;
}

Personally, I try to avoid overwriting the default styles because of the precedence issues.

Upvotes: 3

Related Questions