How to set proper size to the tabview?

Question

For the Webix Tabview, I use the configuration similar to following: http://webix.com/snippet/cdb211fd

  view: "tabview",
  cells: [
    {
      header: "Tab 2",
      body: {
        rows: [        
          {
            cols: [
              { view: "button" },
              { view: "button" }            
            ]
          },
          {
            view: "datatable"
          }
        ]
      }
    }, /* another with the same config, but different number of buttons */
  ]

Initially, all is OK, but if a user switches to another tab, it will squeeze to the width of the buttons, while I expect the tabview will fit the screen. Is there a workaround or what I'm doing wrong?

Answer 1

I usually use a multiview in tandem with a tabbar so I haven't encountered this problem. It seems that webix is adapting the with of the tabview with the width of the currently active cell. A simple solution in your example is to put a width config value to the tabview instance. I tried that here: http://webix.com/snippet/88e79fc7 (I used width: "100%" to make the tabview occupy the whole width of its parent view.

Answer 2

Sometime webix need empty spaces to be explicit. You have to add {} element after "toolbar" buttons.

{
    padding:10,
    cols: [
        { view: "button", value: "Refresh", width: 150 },
        { view: "button", value: "Serialize", width: 150 },
        {}
    ]
},

A better way would be to use "toolbar" widget for this purpose.

Updated snippet : http://webix.com/snippet/fab21b2e