Weird modal window efect with tables

I have this weird looks when I create a modal window ona a view with table, this is my code:

 public OrderingUser(){
        lyMain = new VerticalLayout();
        Button btnTestModal = new Button("probar ");
        btnTestModal.addClickListener(new Button.ClickListener() {
            private static final long serialVersionUID = -8585279840986586257L;

            @Override
            public void buttonClick(ClickEvent event) {
                UI.getCurrent().addWindow(searchUserWin);            
            }
        });
    
        searchUserWin = new SearchUserWin();
        lyMain.addComponent(btnTestModal);
        
        userTable = new AllowedUsr();
        lyMain.addComponent(userTable);
        this.setCompositionRoot(lyMain);
    }
    private class SearchUserWin extends Window implements Button.ClickListener{

        private static final long serialVersionUID = 1L;
        private FormLayout lyWinMain;
        public SearchUserWin(){
            super("Buscar Usuarios");
            this.setWidth("200px");
            this.setHeight("200px");
            this.setModal(true);
            this.setClosable(true);
            lyWinMain =  new FormLayout();
            lyWinMain.addComponent(new Label("Hola usuarios...."));
            this.setContent(lyWinMain);
        }

        @Override
        public void buttonClick(ClickEvent event) {
            // TODO Auto-generated method stub
            
        }
    }
    
    public class AllowedUsr extends Table{
        private static final long serialVersionUID = -2105534350345563594L;
        private int totalSize;

        public AllowedUsr(){
            super("Usuarios acreditados:");
            this.setDescription("Lista de usuarios acreditados para accesar a este sistema.");
            this.setWidth("600px");
            this.setHeight("100%");
            addContainerProperty(USR_COL.ID,       Integer.class, null);
            addContainerProperty(USR_COL.USERNAME, String.class,  null);
            addContainerProperty(USR_COL.FULLNAME,       String.class, null);
            addContainerProperty(USR_COL.PERFIL, CheckBox.class,  null);
            addContainerProperty(USR_COL.DEPTO, String.class,  null);
            
            this.setColumnHeader(USR_COL.ID, "ID");
            this.setColumnHeader(USR_COL.USERNAME, "Nombre de Usuario");
            this.setColumnHeader(USR_COL.FULLNAME, "Nombre completo");
            this.setColumnHeader(USR_COL.PERFIL, "Perfil");
            this.setColumnHeader(USR_COL.DEPTO, "Departamento");
            
        //    this.setColumnAlignment(USR_COL.ID, "ID");
        //    this.setColumnAlignment(USR_COL.USERNAME, "Nombre de Usuario");
        //    this.setColumnAlignment(USR_COL.FULLNAME, "Nombre completo");
            this.setColumnAlignment(USR_COL.PERFIL,  Align.CENTER);
        //    this.setColumnAlignment(USR_COL.DEPTO, "Departamento");
            
        
            
            this.setSelectable(true);
            this.setMultiSelect(false);
        }
    }

Anyone else have this issue?

17268.png

Very strange indeed. Does this occur on all browsers?

I ran parts of your code in a new Vaadin project:

@Override
  protected void init(VaadinRequest request) {
    final VerticalLayout layout = new VerticalLayout();
    setContent(layout);

    SearchUserWin searchUserWin = new SearchUserWin();

    Button button = new Button("Testing", new Button.ClickListener() {
      @Override
      public void buttonClick(ClickEvent event) {
        UI.getCurrent().addWindow(searchUserWin);
      }
    });

    layout.addComponents(button, new AllowedUsr());
  }

…but didn’t run into this issue. Does this problem occur for this sample code as well?

I didnt post all the code of the structure , this code its a component that I add on a more complex app.

This happened on Chrome 39.0.2171.65 (Its the version I have) , but on IE works ok, Im going to download more browsers and do more tests.

the full app structure its something like this:

GridLayout gMain = new GridLayout(1,3)
HorizontalLayout hlyTop ;
VerticalLayout vlyMiddle
HorizontalLayout hlyBottom ;

gMain.addComponent(hlyTop, 0,0)
gMain.addComponent(hlyMiddle, 0,1)
gMain.addComponent(hlyBottom, 0,2)

vlyMiddle.addComponent(new OrderingUser());

I’m having the same issue :frowning:

Have you fixed it?

Hello, nop, sorry. I couldn’t find what was wrong :s but since the default browser on the company is IE and that was working fine, I left it be, It was a minor issie and the aplication was a priority, (It bothers me of the look and feel but… ). did you try with a newer version of vaadin? I was trying with the 7.3.6 I think. I dont know if in the new versions the isue was fixed. If you find out what was wrong please share it.