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;

            public void buttonClick(ClickEvent event) {
        searchUserWin = new SearchUserWin();
        userTable = new AllowedUsr();
    private class SearchUserWin extends Window implements Button.ClickListener{

        private static final long serialVersionUID = 1L;
        private FormLayout lyWinMain;
        public SearchUserWin(){
            super("Buscar Usuarios");
            lyWinMain =  new FormLayout();
            lyWinMain.addComponent(new Label("Hola usuarios...."));

        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.");
            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");

Anyone else have this issue?


Very strange indeed. Does this occur on all browsers?

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

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

    SearchUserWin searchUserWin = new SearchUserWin();

    Button button = new Button("Testing", new Button.ClickListener() {
      public void buttonClick(ClickEvent event) {

    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.