1
HeaderButton.setWidth("80px");

seems to have no effect.

HeaderButton.addStyleName("myStyle"); with ".myStyle {width:80px;}" in css neither. But the css is active which is proven by the fact that the following has an effect, but no nice one:

HeaderButton.setStyleName("myStyle");

With setStyleName, the width is indeed increased but the rendering is as if the button width had not increased, i.e. the round border is inside the button which looks funny.

Is there a simple way to increase the width of a left header button just by some pixels so that I can see the German "Abbrechen" (means Cancel) complete? :)

Thanks in advance

user2618802
  • 57
  • 5

1 Answers1

1

After some trials I have found a solution. It appears, one has just to inject an own HeaderCss instance at the beginning of onModuleLoad(). The style defined there seems to work then for all HeaderPanels and their buttons.

My example is as follows.

IIntroductionBundle.java:

package com.rlogix.tourneys.client.view.introduction;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.googlecode.mgwt.ui.client.theme.base.HeaderCss;

    public interface IIntroductionBundle extends ClientBundle {
        public static IIntroductionBundle I = GWT.create(IIntroductionBundle.class);

        @Source("header.css")
        HeaderCss headerCss();
    }

and header.css:

@CHARSET "ISO-8859-1";

.mgwt-HeaderButton {
}

.mgwt-HeaderButton-active {

}

.mgwt-HeaderButton-back {

}

.mgwt-HeaderButton-forward {

}

.mgwt-HeaderButton-round {

}

.mgwt-HeaderButton-text {
    max-width:80px;
}

.mgwt-HeaderButton-border-container {

}
.mgwt-HeaderButton-border-content {

}

.mgwt-HeaderPanel {

}

.mgwt-HeaderPanel-left {
    margin:6px;
    margin-left:0px;
}

.mgwt-HeaderPanel-center {

}

.mgwt-HeaderPanel-right {
}

.mgwt-DropDownMenu {

}

.mgwt-DropDownMenu-content {

}

.mgwt-DropDownMenu-arrow {

}

Maybe this helps somebody...

user2618802
  • 57
  • 5