gwtgwt-celltable

How to Style ButtonCell in CellTable Gwt?


How to Style ButtonCell in CellTable Gwt?

I searched on internet & found 2 solutions:

-Solution 1: use urColumn.setCelLStyleNames("yourStyleName"); (Adding style to a ButtonCell)

ButtonCell nextStepButton=new ButtonCell();
Column<String[], String> nextStepColumn = new Column<String[], String>(nextStepButton) {

        @Override
        public String getValue(String[] oneOrder) {
            return oneOrder[11];
        }
};
nextStepColumn.setCellStyleNames(getView().getRes().css().buttonCell());

in CSS

.gwtButton, .buttonCell.getButton {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: black;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
  color: white;

}

I tried but nothing happened.

-Solution2: modify ButtonCell (https://code.google.com/p/google-web-toolkit/issues/detail?id=7044)

               ButtonCell nextStepButton=new ButtonCell(){
                    // A native button cell doesn't have the gwt-button class, which makes it
                      // look weird next to other gwt buttons. Fix that here.
                      @Override
                      public void render(
                          final Context context,
                          final SafeHtml data,
                          final SafeHtmlBuilder sb) {
                        sb.appendHtmlConstant("<button type=\"button\" class=\"gwt-Button\" tabindex=\"-1\">");
                        if (data != null) {
                          sb.append(data);
                        }
                        sb.appendHtmlConstant("</button>");
                      }
                };

for the solution2, i can see the difference (ie the Style of ButtonCell got changed). However, I don't have "gwt-Button" css class but only have "gwtButton" css class (see the above css). However, when I change "gwt-Button" to "gwtButton" in the the 2nd code sb.appendHtmlConstant("<button type=\"button\" class=\"gwtButton\" tabindex=\"-1\">"); then nothing happened.

So, How to style Button cell so that it can pick up the gwtButton css class


Solution

  • If the code posted is what you have in your page, you have an error in the selector, unless you did a mistake when copying to your question.

    [EDITED]

    Ok, I see the error, you are setting the style to the container of the button, so you have to change your selector. Use this one in your css resource:

    .gwtButton button {
      margin: 0;
      padding: 5px 7px;
      ...
    }