Change magin/padding on buttons?

Universal Dashboard Universal Dashboard Help
1

Hiya

When I add buttons to the content of a UDGrid, the space between the lines becomes twice as big, enough to fit 2 mouse cursors.
Can the size/Padding of a button be changes?

image

2

You could alter the theme:

$theme = New-UDTheme -Name "Custom" -Definition @{
    '.ud-button' = @{
      'margin' = '0px'
    }
} -Parent default
$dashboard = New-UDDashboard -Theme $theme

You can also reduce the padding between the text and the edge of the button using “‘padding’ = ‘0px’”

Obviously this will apply to all buttons on your Dashboard.

ref: https://docs.universaldashboard.io/themes#using-raw-css

1 Like
3

Thanks, and sorry for the late reply.

Margin had no effect,
Padding only reduced the width,
Height had no effect either.

Guess I’m outta luck :slight_smile:

4

Yes. The Padding only seems to effect the horizontal free space in the UDButton.
Someone with more experience in the CSS tricks might be able to help. Reducing the padding in the UDGrid might also be a route to investigate.

5

I’ve done some experimenting with New-UDMuButton. I was able to handle the CSS in the theme.

$theme = New-UDTheme -Name "Custom" -Definition @{
	'.ud-mu-button' = @{
		'margin' = '0 !important'
		'padding-top' = '0 !important'
		'padding-bottom' = '0 !important'
	}
}

There isn’t a lot of documentation on UDMuButton but basic settings for a button looking button is:
New-UDMuButton -Variant Contained -Text “Click Me” -style @{“background-color”="#5C1349";“color”="#FFFFFF"}

This would set the values for all UDMubuttons in your dashboard. Alternatively, to set the buttons individually, eg in a grid, you could use:

New-UDGrid -endpoint {
	$buttonStyle1 = @{"background-color"="#5C1349";"color"="#FFFFFF";"margin"="0";"padding-top"="0";"padding-bottom"="0"}
	ForEach ($x in $xxx) {
		New-UDMuButton -Variant Contained -Text "$x" -OnClick {Show-UDToast -Message "You clicked $x"} -style $buttonStyle1
	}
}

gav

1 Like