Styling : Gap between group of element

[chupins]

Question

Hello,

I created a class containing a group of nicegui elements.
When I add 2 of these objects in a ui.row(), there's a gap between them and I can't get rid of it :

I tried some classes over the ui.row, but nothing is changing it.

Here is the code i'm using :

from nicegui import ui

class my_widget:
    def __init__(self, name, value):
        self.name = name
        self.value = value
        self.container = ui.row()
        
        self.create_widget()

    def create_widget(self):
        with self.container:
            ui.input(label=self.name, placeholder='fichier de propriétés', value=self.value).props('dense').classes('w-1/6')
            ui.switch(text='var', value=True).props('dense')
            ui.button('Edit')

with ui.row().classes('gap-0'):
    my_widget('wid1', 'toto')
    my_widget('wid2', 'tata')

ui.run()

Thanks by advance for any hint. I really struggle in managing styling...

[evnchn]

TL-DR (this part written by ChatGPT, all else manually):

To troubleshoot these kinds of issues, I recommend using DevTools Elements to inspect layout. The issue seems to be that the row is wider than expected due to the input having a w-1/6 class, causing the row to be six times the width of the input.
You can fix this by applying flex-grow on the other elements to absorb the space, or apply absolute width classes to the input in Tailwind CSS, such as w-[51.667px]

I don't want to jump to the solution. The discovery process was interesting in my opinion, and I also learnt something new today.

First of all, tooling. DevTools Elements is your friend. Click on the first icon in the toolbar to allow you to hover over elements to see how they are laid out.

We see that nobody wants to take up the space. It's like we have leftovers at dinner 🍝.

==> Now an obvious solution would be to apply flex-grow to any of the elements to take up the remaining space. This is because ui.row() is flex-direction: row in a trenchcoat. Well, there can never be leftovers if someone always eats until the plates are clean...

--> But, your intended solution may be to want to make the gap to be gone, and the other elements to shift to the right.

Then we ask, why the row is so long, and so weird as well, 310.010 px.

Let's check the width in the computed styles. Are anything explicitly setting the width to this weird value?

Well, nope. Otherwise there's an arrow next to it, and you can click to see who cause it.

Digging deeper, do you notice that the input has a width of 51.667? Do a bit of napkin math, and 310.010 / 51.667 = 6.000!

ROOT CAUSE: input has w-1/6, so the row has 6 times the width of the input

Analogy: Mom looks at first child and cooks 6x the food he can eat. But the two other children aren't hungry at all, and we have a food waste problem.🚮

==> You may apply other absolute width Tailwind CSS classes. Assuming you like the current width, you can even use w-[51.667px] to force-maintain the same width for the input element. While you're at it, let's revert the gap-0 used for the gap between the two my_widget, and let's use items-center for a neater look.

Find the code using the 2nd solution here: https://gist.github.com/evnchn/621d61ddb364b44b98dcc031a15cf8bc

PS: I actually didn't know of this behaviour. Typically, I set the width of the outside element explicitly, and then use w-1/6 on inner elements. It's like mom is the controller and cooks XXXg of spaghetti today, divide 1/6 to a child always, not the other way round...

[chupins]

Thanks a lot for this deep investigation !
I can use a fixed width if it work.

[falkoschindler]

As @evnchn correctly analyzed, "w-1/6" seems to be the problem. What's your intention behind using this class, @chupins?
Some fixed width might be better:

def my_widget(name, value):
    with ui.row(align_items='center'):
        ui.input(label=name, value=value).props('dense').classes('w-40')
        ui.switch(text='var', value=True).props('dense')
        ui.button('Edit')

with ui.row():
    my_widget('wid1', 'toto')
    my_widget('wid2', 'tata')

[chupins]

Thank for your answer !
I wanted to have a smaller width than default for the ui.input. But i wanted to keep a relative size because i use it in a resizable layout (with ui.splitter).
For instance, i'll like to have everything in a row, even if I use 5 "my_widgets".
But i think a fixed width would work as well.