How to reduce the button size in UI

User Experience
,
1

Hi,

As part the project requirement, I have to display the button in UI screen, but whenever i have maximize the page then button size will be increased automatically and not fit into the designed UI.

So kindly suggest me, is there any way to reduce the button size or alter the layout size.

Thanks,

Gomathi

2

Hi @GomathiP16632518, Use Skin Rules:

  • Access the skin rule for the button you want to modify. This can be done by clicking the gear icon on the cell containing the button and navigating to the “Presentation” tab.
  • In the “Format” list, select “Other” and choose the format you want to apply.
  • Look for properties related to button size, such as:
    • Height: This sets the button’s vertical dimension in pixels.
    • Width: This sets the button’s horizontal dimension in pixels.
    • Padding: This controls the spacing between the button’s text and its borders, effectively influencing overall size. You can adjust padding values to reduce wasted space.
3

@VarshiniDasoju ,

Thanks. But I have tried the below things already and it isn’t working as expected.

Thanks,

Gomathi

4

@GomathiP16632518 - Place your button in a dynamic layout and in skin rule go for that specific format of dynamic layout and enable “Responsive breakpoints” and customize the width of the dynamic layout as per the zoom size by adding the break points.

Thank you.