FlowUI: remove margin or alignment

Support
#1

When I use a tabSheet, the margin of components inside the tabs makes the total margin both left and right side of the tabSheet high. I want to align the components inside the tabSheet with the other components outside the tab as you see in the image below.

image

#3

Hi,

The inner padding is because you’re using VerticalLayout component which is by default has it. This padding can be removed by setting <vbox padding="false">.

The outer padding is by Vaadin design, i.e. it’s added to TabSheet content. Since Jmix v1.5 we removed this padding (see related issue). It still may be shown in the studio designer, but the app doesn’t have it.

Regards,
Gleb

#5

Hi Gleb
By using padding =“false”, it improves but still has another padding/margin that still looks odd, please see below:

image

<tabSheet id="tabSheet" width="100%" height="100%">
            <tab id="tabDesc" label="msg://salesOpportunityDetailView.tabDesc">
                <vbox padding="false" height="100%">
                    <formLayout id="form2" dataContainer="salesOpportunityDc">
                        <textArea id="descriptionField" property="description" colspan="2" minHeight="9em"/>
                    </formLayout>
                </vbox>
            </tab>

I’m using V2.1.3. How can we remove that extra margin as indicated in the arrow mark?

#6

Hi,

We rolled back TabSheet padding due to focus-ring is being cut off (See issue).

Regards,
Gleb

#7

Hi
Then what’s the future? Is there any way you’re thinking of resolving this without the padding it takes a lot of space when it is displayed in a small device like a cell phone. Even in a Desktop, it is not optimum.

#8

This is the default padding of Vaadin TabSheet Component that is required to avoid visual issues with fields’ focus-ring. When we removed padding it was a mistake and we rolled back our changes. We don’t plan to resolve this, because it’s not a bug.

#9

I agree it’s not a bug but it’s look & feel that impacts the user experience especially when we want to say it’s a responsive web application to the end users and they want to use it in small devices like smartPhones!

Is it possible we keep a smaller padding instead to prevent the component looks cut but not much padding we have today?

#10

Add custom class name to tabsheet, e.g. <tabSheet classNames="min-padding">

and style implementation:

jmix-tabsheet.min-padding::part(content) {
    padding: var(--lumo-space-s) var(--lumo-space-xs);
}
1 Like