A question about Font Sizes on a Card

Universal Dashboard Universal Dashboard Help
1

I am working on a form for a customer, the intent being someone can fill in the form to request a new VM and the form submission kicks off my (already completed) build automation. I am new to UD, and things are for the most part going well, but I have a question surrounding font sizes. My form is basically a single UDCard, with the elements I need on it, like so:

$aParams = <pull info from external source>

$myDash = New-UDDashboard -Title "Server Request Form" -Content {
New-UDHeading -Text "Server Request Form" -Size 1

New-UDCard -Title "" -Content {
    New-UDInput -Title "" -Id "Form" -Content {
        New-UDInputField -Type textbox -Name 'Description' -Placeholder 'Server Description'                
        New-UDInputField -Type textbox -Name 'Project' -Placeholder 'Project#'
        New-UDInputField -Type date -Name "GoLive" -Placeholder "Go-Live Date"
        New-UDInputField -Type textbox -Name 'LocalAdmins' -Placeholder "Local Admins"
        New-UDInputField -Type select -Name "LOB" -Placeholder "Line Of Business" -Values $aLOB
        New-UDInputField -Type select -Name 'ENV' -Placeholder "Environment" -Values $aEnv
        New-UDInputField -Type select  -Name 'Domain' -Placeholder "Domain" -Values @("Parent Domain", "Child Domain")
        New-UDInputField -Type select  -Name 'Groups' -Placeholder "Ivanti Group" -Values $aGroups
        New-UDInputField -Type checkbox -Name 'SQL' -Placeholder "SQL"
        New-UDInputField -Type checkbox -Name 'Posix' -Placeholder "Posix"
    } -Endpoint {           
        if ($Description -match "null") {
            New-UDInputAction -Toast "Description is blank" -Duration 10000
        }
        if ($Project -match "null") {
            New-UDInputAction -Toast "Project is blank" -Duration 10000
            }
        }
    }
}

Start-UDDashboard -Dashboard $myDash -Port 666 -AdminMode

The form works well, but I received a request to increase font size. However, if I specify -TextSize Large in my call to New-UDCard, the Text in the Select element seems no larger but appears to overlap with the Title of that element.

Pic1
Pic1684Ɨ553 7.28 KB

I have tried a couple of different ways (creating a GRID to hold the elements, etc.) but have not had any luck. I did stumble on something in the documentation about creating a theme, the fourth example of which shows using raw CSS to specify font size in px, but could not get that to work for me.

Just wondering if there is something stupid simple I am missing for more granular control of font sizes within the card.

2

Hey @JLogan3o13 if you want the font to be bigger on the input fields then you will need to add some custom CSS to your projectā€¦you can build a simple custom theme with this in it:-

'input[type="text"]:not(.browser-default)' = @{
	'font-size' = "x-large"
}

https://docs.universaldashboard.io/look-and-feel/themes#creating-child-themes

This will make the text bigger on the input. Peace

3

Thanks for this. I was trying the example further down in that page, under ā€œUsing Raw CSSā€ but was not working for me. Your suggestion worked a treat (although it changed the header and footer to pink?), but I have the same problem of the element name and the actual text colliding.

Pic1

Moving in the right direction, though. I will keep playing with it. Thanks again.

4

Ok @JLogan3o13 the ā€˜pinkā€™ thing is a ā€˜featureā€™ I get rid of this by stopping site in IIS killing the related process and starting it up again, and goes back to normalā€¦as for the placeholder, you will need to increase the height like so:-

'input[type="text"]:not(.browser-default)' = @{
	'height' = '3.5rem'
	'width' = '75%'
	'font-size' = 'xx-large'
}

I included the width as well incase your next question was not making it 100% width :crazy_face: Peace

image
image1170Ɨ103 5.69 KB

5

I will give this a go, thanks.

1 Like