Dashed outline around HorizontalLayout

Vaadin 6 / 7 / 8 Framework UI
1

I have found a problem. When i click on HorizontalLayout (which contains MenuBar) then dashed border (in Firefox) or solid border #CC540A (in Chrome) appears around it. In IE7 and Opera everything is ok - it does not occur there.

screenshot available here:
http://img257.imageshack.us/img257/5056/problemvaadin.png
or here
http://www.pl.image-share.com/ipng-27-12.html
or in attachments to this topic

code snippet:
HorizontalLayout rightContent = new HorizontalLayout();

rightContent.setWidth("995px");
rightContent.setHeight("117px");
rightContent.addStyleName(IEhrCssStyles.MAIN_HEADER_LAYOUT_RIGT_CONTENT);
    MenuBar menuBar = createMenuBar();
    rightContent.addComponent(menuBar);
    rightContent.setComponentAlignment(menuBar,Alignment.BOTTOM_RIGHT);

Any ideas ?
Thanks in advance !
11487.png

2

Hi,

It looks like it’s the focus outline of the MenuBar. That can be removed using CSS.

It should be removed in our core themes, Reindeer and Runo, but it looks like you’re extending the Base theme, am I right? If so, then there’s a small bug in the Base theme.

You should get rid of the outline with the following CSS:

.v-menubar:focus {
   outline: none;
}
3

Thanks for help ! :slight_smile: it works