Strange button behavior on different window size

Hello forum,

I´m testing with Vaadin 7.0.5 and Firefox 21.0 and IE 9.0.8.

I have encountered some strange difference with the button behavior:

I have a simple search button in a Custom Components horizontal Layout that reacts with FIREFOX only, when the window has a large enough size.

If I minimize the window (horizontally) step by step, the button stops to work:

Normal/ Large size: The whole button reacts - icon and text (mouse cursor turns to hand symbol) are sensitive.

getting smaller: Only the icon on the button works (the mouse cursor turns to a hand symbol only over the icon).

smallest size: The button doesn´t work - independet of the mouse cursor position on the button

Other Buttons on the window don´t make problems even if they are in other layouts and on a more right position in the window.

With IE the problem doesn´t exists.

But on IE the buttons don´t turn the color when pressed - is this a “chameleon thing”?

Best regards

Alex
13035.png

Is some other element covering the button when the window is narrower? The image in the top right corner comes to mind at first, but I’m just guessing here.

Hello Jouni,

thanks for answer. In IE it is not a problem - only in FF.

Generally I prepared a class with the designer with some layouts and added the components as needed in the derived class´ layout.

The title and the image is positioned in a title bar (titleBarL and titleBarR).
The search field and it´s button is positioned in a tool bar (toolBarL and toolBarR).

In the attachment is a part of the designer view of the layout.


Here some parts from the parent class:

public Maintenance2CC() {
		buildMainLayout();
		setCompositionRoot(mainLayout);

		myInit();
}

private VerticalLayout buildVertLayout1() {
		// common part: create layout
		vertLayout1 = new VerticalLayout();
		vertLayout1.setStyleName("myapp");
		vertLayout1.setImmediate(false);
		vertLayout1.setWidth("100.0%");
		vertLayout1.setHeight("-1px");
		vertLayout1.setMargin(true);
		
		// titleBar
		titleBar = buildTitleBar();
		vertLayout1.addComponent(titleBar);
		
		// titleBar2
		titleBar2 = new HorizontalLayout();
		titleBar2.setImmediate(false);
		titleBar2.setWidth("-1px");
		titleBar2.setHeight("-1px");
		titleBar2.setMargin(false);
		titleBar2.setSpacing(true);
		vertLayout1.addComponent(titleBar2);
		
		// toolBar
		toolBar = buildToolBar();
		vertLayout1.addComponent(toolBar);
		
		// contentArea
		....... 
		
		return vertLayout1;
	}

@AutoGenerated
private HorizontalLayout buildTitleBar() {
		// common part: create layout
		titleBar = new HorizontalLayout();
		titleBar.setStyleName("titlebar");
		titleBar.setImmediate(false);
		titleBar.setWidth("100.0%");
		titleBar.setHeight("-1px");
		titleBar.setMargin(false);
		titleBar.setSpacing(true);
		
		// titleBarL
		titleBarL = new HorizontalLayout();
		titleBarL.setImmediate(false);
		titleBarL.setWidth("-1px");
		titleBarL.setHeight("-1px");
		titleBarL.setMargin(false);
		titleBarL.setSpacing(true);
		titleBar.addComponent(titleBarL);
		titleBar.setComponentAlignment(titleBarL, new Alignment(33));
		
		// titleBarR
		titleBarR = new HorizontalLayout();
		titleBarR.setImmediate(false);
		titleBarR.setWidth("-1px");
		titleBarR.setHeight("-1px");
		titleBarR.setMargin(false);
		titleBarR.setSpacing(true);
		titleBar.addComponent(titleBarR);
		titleBar.setComponentAlignment(titleBarR, new Alignment(34));
		
		return titleBar;
	}

	@AutoGenerated
	private HorizontalLayout buildToolBar() {
		// common part: create layout
		toolBar = new HorizontalLayout();
		toolBar.setStyleName("toolbar");
		toolBar.setImmediate(false);
		toolBar.setWidth("100.0%");
		toolBar.setHeight("40px");
		toolBar.setMargin(false);
		toolBar.setSpacing(true);
		
		// toolBarL
		toolBarL = new HorizontalLayout();
		toolBarL.setImmediate(false);
		toolBarL.setWidth("-1px");
		toolBarL.setHeight("-1px");
		toolBarL.setMargin(false);
		toolBarL.setSpacing(true);
		toolBar.addComponent(toolBarL);
		
		// toolBarR
		toolBarR = new HorizontalLayout();
		toolBarR.setImmediate(false);
		toolBarR.setWidth("-1px");
		toolBarR.setHeight("-1px");
		toolBarR.setMargin(false);
		toolBarR.setSpacing(true);
		toolBar.addComponent(toolBarR);
		toolBar.setComponentAlignment(toolBarR, new Alignment(6));
		
		return toolBar;
	}


parts in the derived class:

@Override
public void myInit() {

		// create public reference objects from parent for direct access
		crtPublicRefObjects();
		//----------------------------------------------------------------
		// create title label
		Label title = new Label("User Maintenance");
		rTitleBarL.addComponent(title);
		title.setStyleName("title");

		// create title image
		[b]
Embedded imgTitle = new Embedded("", new ThemeResource(
				"../../imgTitleUser.png"));
		imgTitle.setMimeType("image/png");
[/b]
		
		rTitleBarR.addComponent(imgTitle);
		rTitleBarR.setComponentAlignment(imgTitle, Alignment.MIDDLE_RIGHT);
		
		// create search label
		Label searchLbl = new Label("search:");
		searchLbl.setWidth("70px");
		rToolBarL.addComponent(searchLbl);
		
		// create search field 
		dspSearch = new TextField();
		dspSearch.setWidth("150px");
		rToolBarL.addComponent(dspSearch);
	
		//----------------------------------------------------------------
		// create search button for searchfield
		[b]
btnSearch = new Button("search");
		btnSearch.setIcon(new ThemeResource("../../imgBtnSearch.png"));
		btnSearch.setImmediate(true);
		btnSearch.addClickListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				fillTable1();
			}
		});
		rToolBarL.addComponent(btnSearch);
[/b]
             .....

13036.png