e.g. aligning them to the left or the right, and “shrinking” them so they only take the width they need, like you can do with columns on the object-table
Hi cjmeyer,
The only official way to make buttons smaller is to add your buttons together in a button-group with attribute mode="row" (Button group docs) or the smallest button profile is mode="collapsed" but it has its unique use cases.
If you only have one button, you can make it a bit smaller by adding it into a columns component and filling one or more columns with empty <info></info> components. This is not ideal since you’ll see artefacts on smaller screen sizes.
Then lastly I’ll mention that you could drive button behaviour from anything with an on-change.
Like a toggle is probably the smallest option or list-item which is a bit bigger but can look better sometimes.
Alright, I’ve been adding all-white buttons to the left column.
The toggle I understand. How do I align the list-item to the right?
It is not currently possible to align list items.
Other than button group, placing them in columns may be the only other option. If you need to make them smaller but have nothin to place in the other columns you can use an html tag without a source to force a seemingly empty column to show itself…
<columns>
<column>
your button goes here
</column>
<column>
<html show-fullscreen-button="false" height="20"/>
</column>
</columns>
The grid UI component (released in runtime version 4.85.0) could potentially also work here. The size of UI components can be specified by placing them in a cell, and controlling the size of the cell using attributes such as column-span and row-span.
Here’s an example of what I’m thinking of: https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/grid/grid-examples#controlled-view-layout