Adjust space between components in Form Layout demo?

[smp]

How do you adjust the space between the components in the FormLayout example?  I want more space where the yellow lines are.

[Sherzod]

6 hours ago, smp said:

How do you adjust the space between the components in the FormLayout example?  I want more space where the yellow lines are.

Hello,

This post may help you:

 

[smp]

Hi Sherzod -

I tried applying those settings to the container but it does not appear to make any changes to the spacing.

Uniqui 1.90.0.1558 / Delphi 11

[picyka]

This part of the layout is a lot of work, I do everything by eye and adjust the spaces, if you have a technique it would help a lot

[Sherzod]

52 minutes ago, smp said:

I tried applying those settings to the container but it does not appear to make any changes to the spacing.

Uniqui 1.90.0.1558 / Delphi 11

Hi,

Can you make a simple testcase to check? 

[smp]

I can but I was just testing with the FormLayout demo that comes with UniGui.

Test.zip

[Sherzod]

Hello, 

I will try to check. 

[x11]

On 2/11/2022 at 12:23 AM, smp said:

How do you adjust the space between the components

 

use uniEdit1.LayoutConfig.margine

help https://developer.mozilla.org/en-US/docs/Web/CSS/margin

[x11]

container layout = vertical

top and down = 10

left and rigth = 0

Test.zip

[smp]

High X11... I know you can accomplish something similar with a different layout but I am trying to use the "Form" layout.

[Sherzod]

14 hours ago, smp said:

but I am trying to use the "Form" layout.

Hello,

Try this approach.

1. CustomCSS:

.x-form-layout-custom-wrap {
    border-spacing: 25px;
    display: table;
    width: 100%;
    border-collapse: separate;
}

2. MainForm -> ClientEvents -> UniEvents -> [form] ->

function form.beforeInit(sender, config)
{
    config.layout = {
        type: 'form',
        //itemSpacing: 100
        formWrapCls: 'x-form-layout-custom-wrap'
    };
}

3. Result:

[x11]

17 hours ago, smp said:

I am trying to use the "Form" layout.

And what's the difference? Why is that?

Layout "form" very similar to the layout "vbox"