Resource Loading Method Effects Layout

Rendered layout is effected by the method of loading image resources. If you load image resources using the style sheet the layout seems correct. If you load the resources in code the layout is wrong, even with all the other styles unchanged.

I am creating a custom component, a spinner, which combines a TextField and Buttons for increase and decrease value.

Stylesheet (Sass):

.spinner {
   .v-nativebutton {
      border: medium none;
      /*height: 12px;*/
      /*width: 13px;*/
      overflow: hidden;
      padding: 0;
   .buttonlayout {
      .upbutton {
         /*background-image: url("../runo/icons/16/arrow-up.png");*/
         background-color: rgba(0, 0, 0, 0);
         background-position: 0 0;
         background-attachment: scroll;
         background-repeat: no-repeat;
      .downbutton {
         /*background-image: url("../runo/icons/16/arrow-down.png");*/
         background-color: rgba(0, 0, 0, 0);
         background-position: 0 0;
         background-attachment: scroll;
         background-repeat: no-repeat;

Spinner component: “spinner”
Layout for the buttons: “buttonlayout”
Increase Button: “upbutton”
Decrease Buttons: “downbutton”

Up Button Java (Down Button is similar):

btnIncrease = new NativeButton();
btnIncrease.addStyleName( "upbutton" );

ThemeResource res = new ThemeResource( "../runo/icons/16/arrow-up.png" );
btnIncrease.setIcon( res );
btnIncrease.setWidth( 13.0f, Unit.PIXELS );
btnIncrease.setHeight( 12.0f, Unit.PIXELS );

Layout for the Buttons:

layButtons = new VerticalLayout();
layButtons.addStyleName( "buttonlayout" );
layButtons.setSpacing( false );
layButtons.setMargin( false );

layButtons.setWidth( getBtnDecrease().getWidth(), Unit.PIXELS );
layButtons.setHeight( getBtnIncrease().getHeight() + getBtnDecrease().getHeight(), Unit.PIXELS );

layButtons.addComponent( getBtnIncrease() );
layButtons.addComponent( getBtnDecrease() );

If you un-comment the style attributes above and comment out the resource loading in the code, the buttons look correct. But if you use the java code to load the resources, the button images are shifted down and to the right. Looks like its ignoring the styles and maybe inheriting some higher level height/width style attribute, or some other style attribute.

I need to be able to load the resources in code because I have to resize the textfield of the spinner when the component size is set programmatically by the user of the component. And you have to calculate the correct sizes (can’t do that in a style sheet). The setSizeUndefined() on the main layout of the component does not work the way one would expect if you programmatically setWidth()/setHeight() on the component itself. In other words, you can’t resize the component at runtime unless you can calculate the size of the button layout and subtract that to get the desired size of the TextField.and then set it to that value. Using the stylesheet to load the images forces the component to have a fixed size.

Any ideas how to get the images/buttons to layout correctly when loaded from Java?

The 2 attachments show the problem, ignore that they are using different images.

Ok, I see the problem. The assumption that Vaadin (or GWT or HTML) is making is that if you are calling Button.setIcon(Resource) it tries to line up the image with the assumed text that might be set on the button. So it moves the image to a centered location. Setting the image via stylesheet is a completely different mechanism. The background styles do not apply when using Button.setIcon().

In Swing you would solve this by calling:

But Vaadin’s Button/NativeButton does not have the equivalent methods for all of these. That is the problem.

I am able to get the images to layout properly with styles but loading images in Java is still a problem.