GWT - Java - CSS - background-color not showing

Question

I have cleared my cache and tried Chrome and IE and a number of different ways of coding, however I can not get the background-color of the buttons (pencilButton, blueButton, greenButton and redButton) to display.

The java code is:

    //Create the colour choice buttons and add them to the HorizontalPanel "headingContainer".
    //Pencil
    final Button pencilButton = new Button("P");
    pencilButton.addStyleName("pencilButton");
    headingContainer.add(pencilButton);
    //Set the pencil colour to pencil.
    pencilButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "black";  
        }
    });
    //Blue
    final Button blueButton = new Button("B");
    blueButton.addStyleName("blueButton");
    headingContainer.add(blueButton);
    //Set the pencil colour to blue.
    blueButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "blue";  
        }
    });
    //Green
    final Button greenButton = new Button("G");
    greenButton.addStyleName("greenButton");
    headingContainer.add(greenButton);
    //Set the pencil colour to green.
    greenButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "green";  
        }
    });
    //Red
    final Button redButton = new Button("R");
    redButton.addStyleName("redButton");
    headingContainer.add(redButton);
    //Set the pencil colour to red.
    redButton.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {   

            pencilColour = "red";  
        }
    });

And the CSS is:

.blueButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: blue;
  opacity: 1;
}

.greenButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: green;
  background-size: 100% 100%;
}

.pencilButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: grey;
  background-size: 100% 100%;
  opacity: 1;
}

.redButton {
  display: block;
  width: 25px;
  height: 25px;
  background-color: red;
}

You will notice that I have tried something different in each one to try to get the background colour to show. The theory being that once I got one working then I would change the others to match. Isn't CSS supposed to be simple?

Your help is greatly appreciated.

Regards,

Glyn

When are you inserting that CSS, are you loading gwt theme in your gwt.xml ? — Manolo Carrasco Moñino, Oct 24 '14 at 16:42

score 1 · Answer 1 · answered Oct 24 '14 at 04:15

1

You need to use

background: red;

It works because GWT buttons use an image for their background. So if you only change color, it becomes red but under the image, so you don't see it. If you use background rule, it replaces the same rule in gwt-Button class which is applied to all buttons.

answered Oct 24 '14 at 04:15

Andrei Volgin

40,755
6
49
58

Hi @AndreiVolgin, I changed each to "background:", cleared the cache and ran on Chrome and IE. The background colour was not displayed on any of the buttons in either browser. Also, where can I find out more of these rules that apply to GWT so I do not need to ask a question for nuance? For instance "border-width: 0;" is not working either as I still get a border around another widget. Regards, Glyn. – Glyn Oct 25 '14 at 04:45
JavaDoc for each widget lists the CSS classes applied to it. See, for example, http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/Button.html. Another convenient way is to look at GWT showcase and inspect elements using your browser: http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwBasicButton This is where I tried to add "background: red" to a button, and it worked. – Andrei Volgin Oct 25 '14 at 05:45
Hi @AndreiVolgin, This is such a simple thing and yet it is driving me crazy! "color: red" give me red text however, "background: red" does not give me a red background. In "http://www.gwtproject.org/doc/latest/tutorial/style.html", they use "background-color". I very much appreciate your help. Regards, Glyn – Glyn Oct 26 '14 at 22:45
Did you try to apply `background: red;` in GWT showcase? Are there any differences between a Button in showcase and in your app? – Andrei Volgin Oct 27 '14 at 00:01
Hi @AndreiVolgin, I could not edit the GWT showcase so I copied all the lines from .gwt-Button into my .redButton and changed the line "background: url("images/hborder.png") repeat-x 0px -2077px; " to "background: red;". I also tried "background: red repeat-x 0px -2077px;". Regards, Glyn – Glyn Oct 27 '14 at 01:37
You can edit any page, including the showcase, using your browser tools (e.g. "Inspect Element" in Chrome > Styles > add/change/turn off any styles). When you copy a few CSS rules into your project, it does not guarantee that some other styles from your CSS are not interfering. Using the same browser tools, you can see which style prevails in setting the background color of a button (in Chrome, for example, you can see it in Styles or in the Computed tab). – Andrei Volgin Oct 27 '14 at 03:32

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

I finally found this in "GWT theme style overrides my css style":

Change "background: red" to "background: red !important;". Also, for my border problem change "border: 0px solid white;" to "border: 0px solid white !important;".

Thank you to @AndreiVolgin for your efforts, although you did not provide the answer you did put me on the right track. So thank you very much.

Regards,

Glyn

edited May 23 '17 at 11:57

Community

1
1

answered Oct 27 '14 at 02:22

Glyn

1,933
5
37
60

GWT - Java - CSS - background-color not showing

2 Answers2