How to change the distance between buttons contained in a div (or label)

[JustinHowes01]

Question

I'm trying to create a layout as seen below:

https://imgur.com/a/oXywoUZ

I want to change the horizontal/vertical space between the buttons, and I can't seem to do so. I've tried Tailwind CSS, Quasar, and standard CSS options in a .classes() entry, and I still can't seem to figure it out.

How would I do this?

My code:

def servers():
    with ui.label().classes('bg-[#E0E0E0] w-full rounded p-2'):
        with ui.row():
            with ui.column():
                Buttons.control_button('Power On', 'green')
                Buttons.control_button('Power Off', 'red')
            Buttons.control_button('Reboot', 'red')

    ui.table(columns=columns,
             rows=rows,
             row_key='ip',
             selection='multiple').tailwind('bg-[#E0E0E0] w-full')

[falkoschindler]

Hi @JustinHowes01! What classes have you tried?
Here is an explanation on how to set the gap of a ui.row or ui.column container: #705 (comment)

You have multiple options.

• CSS:

  with ui.row().style('gap: 0'):
      ui.label('A')
      ui.label('B')

• Tailwind classes:

  with ui.row().classes('gap-0'):
      ui.label('A')
      ui.label('B')

• the new tailwind API (coming in NiceGUI 1.2.4):

  with ui.row() as row:
      row.tailwind.gap('0')
      ui.label('A')
      ui.label('B')

  or:

  with ui.row() as row:
      row.tailwind('gap-0')
      ui.label('A')
      ui.label('B')

[JustinHowes01]

Yeah, that was exactly what I needed. I was trying to use space-y-0/space-x-0 instead. Thank you so much for that!