Data grid size adjustment based on content size

[a11]

Hi,

I am trying to make a data grid with buttons for filtering as shown below.

I have changed the sizes of the buttons but do not understand how to change the size in betwen the buttons to a smaller size.

Help is very much appreciated!

Thanks,

Anders

[APDW]

Hi @anders

I am not sure how you are setting up your Data Grid to get that result.

• Are you using the wrap_on property for your datagrid?
• Is each button placed in the same column?
• Are you sure you don’t want to use repeatingPanel instead of dataGrid?

Perhaps this example will help you.

Login

I assume you want all your buttons to have the same distance

[a11]

Thank you,

My code looks like yours. It is a repeating panel inside a datagrid. It is just that I can make the buttons smaller in the CSS but as you can see in the example the spacing between them remains large eventhough the buttons are smaller. I don´t understand how I can remedy this problem. Any suggestion would be appreciated.

Thank you,

Anders

[APDW]

Hi @a11

Can you share a clone of your app, then I can check why yours looks diferent.

[p.colbert]

Perhaps you are looking for this:

[a11]

Hi all,

The way I have reduced the size of the button is with transform: scale(0.5). I have created a new role as can be seen below and it works fine for the button itself.

The panel seems to work fine so I believe it has something with the CSS to do.

Any suggestions appreciated,

Anders

[APDW]

Hi @a11,

So I would suggest you edit the button size using the font size property. Please clone the app I sent, to see how to do this:

Login

That way you get the same results as I have got and you don’t even need to edit any CSS

If you really want to do it with CSS, then don’t use transform: scale (0.5)
But instead, use font-size: 10px. Then you don’t have to worry about spacing.