Prevent Right_Content Change Height, when left content minimized

Webix JS
1

Helo,

I have configuration like this:

<script type="text/javascript">
            var theme = "blue_row";
            var left_container = {
                width: 320,
                multi: true, //enable open multi view/panel same time
                rows: [
                    //First Row
                    {
                        header: "User",
                        body: {
                            template: "testing"
                        }
                    },
                    {
                        header: "Vehicle",
                        body: {
                            template: "testing"
                        }
                    }
                ]
            };
            var right_container = {
                autoheight:false,
                gravity: 3,
                type: "clean",
                rows: [
                    {view: "tabbar", multiview: true, selected: "sOffers", options: [
                            {id: "sOffers", value: "Special offers", width: 150},
                            {id: "regular", value: "Regular", width: 150},
                            {id: "flightInfo", value: "Flight Info", width: 150}
                        ]
                    },
                    {
                        view: "multiview",
                        cells: [
                            {
                                
                            },
                            {
                                
                            }
                        ]
                    }
                ]
            };
            var ui = {
                view: "scrollview",
                body: {
                    type: "space",
                    rows: [{
                            view: "toolbar",
                            height: 55,
                            elements: [
                                {view: "label", template: "<span class='main_title'>Webix Airlines Manager</span>"}, {},
                                {view: "icon", width: 40, icon: "info-circle"},
                                {view: "icon", width: 40, icon: "comments"},
                                {view: "icon", width: 40, icon: "cog", popup: "lang"}

                            ]
                        },
                        {
                            type: "wide",
                            cols: [left_container, right_container]
                        }]
                }
            };
            webix.ready(function () {
                webix.ui(ui);
            });

        </script>

First

https://s10.postimg.org/5vz2wcqcp/first.png

After

https://s18.postimg.org/f1gnyyod5/second.png

when row “User” and “Vehicle” minimized, right size (Height) follow left size, howto prevent this?

2

looks like the problem is related to accordion’s “multi” attribute.

also there is no need to use “scrollview” (unless you have any special purpose). would be much better if “clean” layout is used.

P:S. I think you need to add an empty cell into accordion

3

The problem is related to the default sizing. When both accordion items are closed, the entire view adjusts to their height as there are no predefined sizes.

As a solution, you can:

Set the height of the parent layout:

{
      type: "wide",
      height:800,
      cols: [left_container, right_container]
}

Or, as suggested by integral, add an empty cell with the relative size:

rows: [
    {
      header: "User",
      body: {
        template: "testing"
      }
    },
    {
      header: "Vehicle",
      body: {
        template: "testing"
      }
    },
    { gravity:0.001 }
  ]
4

Thank you intregal and Listopad for your solution, just add and empty cell to accorion