width & height issues all over

Webix JS
1

Dear Support Team,

What is the issue with width & height.
Setting them has NO effect at all.

http://webix.com/snippet/bd664ecc

Regards,

Erik

2

Hello Erik

You are facing Webix autosizing pattern:

  • the view takes the whole available space
  • the views that lie in the same layout section (row or column) take the size of the biggest one.

Hence, your 500px red template forces the toolbar that is situated in the same row to increase up to 500px. It can be solved by placing en empty view (spacer) below the toolbar so that the toolbar can take its size, and an empty view will take the rest of the space:

cols : [
  { template : "tester" , height : 500, css : 'red' }, //1st column
  { rows:[  //2nd column that consists of 2 rows
      { view:"toolbar"},
      {} //spacer with dynamic size
   ]}
]

As to the buttons and other elements that are based on HTML inputs, the height and width of the visible part can be defined by inputHeight/inputWidth parameters. (Though, the same can be achieved by using spacer).

http://webix.com/snippet/343046e0

3

Thanks!!