Responsive / Liquid Layout - Urgent please :)

Webix JS
1

Hi,
First of all, thank you so much for your prompt responses.

Please have a look at this layout:
http://webix.com/snippet/17611c36

Requirement:

  1. The layout (as shown in the example) should utilize the available screen area, the width and height.
  2. All the panels (left, middle, right) have to be shown when window is re-sized (by drag or restore down / maximize).

Issues with layout:

  1. Accordion items: When setting “autoheight” to true, the layout height is shrinking down and not utilizing the total available height.
  2. The error message view / panel (“Displayed error message here!”) will be shown when there is any error, initially the placeholder / view will be hidden and shown when required. Is there any webix method which automatically takes care of adjusting all the views heights and re-adjusts the complete layout. Currently some part of bottom section is hidden / clipped.

So, finally should we write our own logic to readjusts all the views widths and heights to fit to the available screen width and height? or does webix has any built-in methods?

2

(1) just add an empty space below the last cell of accordion

http://webix.com/snippet/1dbe1a2b

( or remove autoheight from the last cell )

http://webix.com/snippet/6b7378b2

(2) just use .show and .hide api. After hiding the item, layout will recalculate the width automatically

http://webix.com/snippet/76771452

In common case it recommended to define fixed sizes and autoheight properties only in cells where it is really necessary. In most cases layout will allocate the size of cell automatically.