Absolute Layout with ScrollView

Webix JS
1

Hello,

I am looking to embed multiple components onto a ScrollView with Absolute Layout. When I add the components to the ScrollView body, they show up on top of everything, and their position is absolute to the page, not to the parent component.

How do we make these components have the correct z-index and relative positioning?

See code below:

`var ui_scheme = {

rows:[
    {
        view:"template",
        type:"header",
        template:"Core"
    },
    {
        cols: [

            {
                view:"tree",
                id:"mainTree",
                gravity:2,
                data: [
                    {id:"root", value:"Cars", open:true, data:[
                        { id:"1", open:true, value:"Toyota", data:[
                            { id:"1.1", value:"Avalon" },
                            { id:"1.2", value:"Corolla" },
                            { id:"1.3", value:"Camry" }
                        ]},
                        { id:"2", open:true, value:"Skoda", data:[
                            { id:"2.1", value:"Octavia" },
                            { id:"2.2", value:"Superb" }
                        ]}
                    ]}
                ]
            },
            {
                view:"resizer"
            },
            {
                gravity:3,
                rows: [
                    {
                        view:"toolbar",
                        cols:[
                            { view:"button", id:"btnNew",  value:"Load", width:100, align:"left" },
                            { view:"button", id:"btnSave", value:"Save", width:100, align:"center" },
                            { view:"button", id:"btnInfo", value:"Info", width:100, align:"right" }]
                    },
                    {
                        view:"scrollview",
                        scroll:"xy",
                        body: {
                            minWidth:5000,
                            minHeight:5000,
                            view: "abslayout",
                            cells: [
                                {
                                    view: "text",
                                    label: "Name",
                                    labelAlign: "right",
                                    top: 100,
                                    left: 350,
                                    width: 200,
                                    height: 40
                                },
                                {
                                    view: "text",
                                    label: "Email",
                                    labelAlign: "right",
                                    top: 100,
                                    left: 550,
                                    width: 200,
                                    height: 40
                                },
                                {
                                    view: "textarea",
                                    label: "My text box",
                                    labelPosition: "top",
                                    top: 140,
                                    left: 100,
                                    width: 650,
                                    height: 100
                                },
                                {
                                    view: "button",
                                    label: "My text box",
                                    top: 260,
                                    left: 260,
                                    width: 400,
                                    height: 40
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    }
]

};`

2

Hello,

Thank you for the snippet. We will include the fix for this problem into the next minor update (it will be released in a week).

3

ok thanks