Width in percentage

Support
#1

Hi,

I am trying to set width in percentage. But it is not working correctly.

I have a vbox with 100% width.
Inside vbox I have 2 components each with 25% width. But it is not sharing the width equally.

Eg :





I am not able to understand what is wrong here.

Thanks in advance.

#2

Hi Vikrant

Did you try with 2 components each 50% ?

This might be a html / browser “problem”.

Best regards

Felix

#3

Hi Zehnder,

Here’s my sample code :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<window xmlns="http://jmix.io/schema/ui/window"
        caption="msg://xyzScreen.caption">
    <layout>
        <hbox spacing="true" width="100%" css="background-color : blue">
            <vbox width="50%" css="background-color : black">
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
            </vbox>
            <vbox width="50%" css="background-color : red">
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
                <textField caption="akjskashd"/>
            </vbox>
        </hbox>
    </layout>
</window>

Output :
image

#4

Hi Dharap

It looks like, if you put 2 vbox side to side, each one is automatically 50% of the parent occupying and the width% is indicating how much of this 50% you want to use.

    <layout>
        <hbox width="1500" css="background-color:blue">
            <vbox width="100%" css="background-color:black">
                <textField width="100%" id="field1Field" property="field1"/>
                <textField caption="test1"/>
            </vbox>
            <vbox width="100%" css="background-color:red">
                <textField width="100%" id="field2" property="field2"/>
                <textField width="100%" caption="test1"/>
                <textField caption="test2"/>
                <textField caption="test3"/>
                <textField caption="test4"/>
            </vbox>
        </hbox>
    </layout>

image

As you see, if you work with 100% on the vbox all is fine.