CODEWITHSUNDEEP
javacsstwitter-bootstrapgwt
Gautam
Gautam

Reputation: 1107

Overriding the default widget class names in gwt

Gwt uses standardized css class names such as 

.gwt-Image 
.gwt-Button

and so on. This prevents me from using these classes with popular css frameworks such as bootstrap.

Is there a way I can override these default style names and use bootstrap or foundation compliant class names ?

Upvotes: 1

Views: 253

Answers (3)

thepun599
thepun599

Reputation: 150

All widgets have setStyleName method. You can call it everywhere you creating a widget. Or you can extend used GWT classes and call setStyleName in the constructor.

public class Button extends com.google.gwt.user.client.ui.Button { 
     public Button() {
          setStyleName("my-stale-name");
     }

}

Upvotes: 0

eHx
eHx

Reputation: 181

If you are using LESS as a CSS Preprocessor, you could extend the bootstrap mixins to your GWT classes

Ex :

.gwt-Button {
    .btn(); //This is the bootstrap mixin for buttons
}

Renders to :

    .gwt-Button{
       display: inline-block;
       margin-bottom: 0;
       font-weight: normal;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
       cursor: pointer;
       background-image: none;
       border: 1px solid transparent;
       white-space: nowrap;
       padding: 6px 12px;
       font-size: 14px;
       line-height: 1.42857143;
       border-radius: 4px;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
    }

It's a little time consuming, but it allows you to have everything in your CSS

Upvotes: 1

Josh KG
Josh KG

Reputation: 5140

Looks like you can add your own class names with the addStyleName method:

From their Stock Widget example:

// Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");

Just add the class names used in Bootstrap to the relevant elements.

http://www.gwtproject.org/doc/latest/tutorial/style.html

Upvotes: 0

Related Questions