Formating New-UDInput "Form"

Universal Dashboard Universal Dashboard Help
1

Hello @All!
I just trying to format this formulary,
As you can see, the formulary is disorder:

Captura2
Captura2.PNG1866×433 9 KB

How can I add spaces between inputs, so that the different New-UDInputField can be distinguished?

Code:

    New-UDInput -SubmitText "Send" -Title "Backup" -Id "FormBK" -Content {
            New-UDInputField -Type 'textbox' -Name 'clientBK' -Placeholder 'Client' -DefaultValue 'XXXXXX'
            New-UDInputField -Type 'checkbox' -Name 'HiddenBK' -Placeholder 'Hide it?'
            New-UDInputField -Type 'textbox' -Name 'EmailBK' -Placeholder 'Email Address' -DefaultValue 'xxxx@yyyy.zzz'
            New-UDInputField -Type 'select' -Name 'sBK' -Placeholder 'PC' -Values @("PC-01", "PC-02", "PC-03", "SERV-01", "ALL") -DefaultValue "ALL"
            New-UDInputField -Type 'radioButtons' -Name 'ModeBK' -Placeholder @("diffent", "total", "blabla") -DefaultValue "total" -Values @("diff", "tot", "bbb")
            New-UDInputField -Type 'checkbox' -Name 'ConfEmailBK' -Placeholder 'Send an Email when complete'

        } -Endpoint {
            param($clientBK, $HiddenBK, $EmailBK, $sBK, $ModeBK, $ConfEmailBK)

Thanks!!

2

I wonder if you can use New-UDRow {} and New-UDColumn -Conten {} inside the input.
Worth a shot?

https://docs.universaldashboard.io/components/formatting#formatting-with-rows-and-columns

3

TThis is css themed. There is a post in this forum about it. Off top of my head I believe it’s LAYOUT = GRID that forces it one row per input.
So first try changing layout see if you prefer that. If not I know it will be CSS related
Or just thinking about it. New-udhtml and do a < p > or br if you catch my drift

4

New-udhtml and do a < p > or br into New-UDInput code? In other words, between New-UDInputField -Type ‘radioButtons’ AND New-UDInputField -Type ‘checkbox’ some html code to separate?

In the other hand, what are you text about CSS Layout code?

Thanks?

5

Hi @devon.ziemer sat on a computer so can type better. OK please look at this post:-

this describes putting the UD INPUT on a separate row which is what you have. By default in 2.5.2 the format looked like this:-

Capture
Capture840×620 86.1 KB

See the difference? It’s controlled by that CSS setting. Hope this makes better sense?

6

Hello again, i tried to add it in CSS
'.card-content' = @{ 'display' = 'grid' }
But nothing change…

7

Hi!
I tried it at first, but it was worse than “without columns and rows” --> Something above others…

8

Could i do a paragraph

betwheen an input field, like you can see in this example:

New-UDInputField -Type 'checkbox' -Name 'encryptBK' -Placeholder 'encryp it'
New-UDHtml -Markup "<p>" New-UDInputField -Type 'checkbox' -Name 'blabla' -Placeholder 'blabla' "</p>"
New-UDInputField -Type 'textbox' -Name 'EmailBK' -Placeholder 'Email Address' -DefaultValue 'x@z.com'

It doesn’t work

9

ok give me sometime I been off work today but can do some investigation…

1 Like
10

Hey @devon.ziemer I do apologise I totally forgot about this…I fixed this the other day using

$theme = New-UDTheme -Name 'Basic' -Definition @{
    '.input-field' = @{
        width = "33%"
    }
    '.row .col.l4' = @{
        width = "100%"
    }
    '.svg-inline--fa' = @{
        display = 'block'
    }
    'input[type="text"]:not(.browser-default)' = @{
        height = '2.5rem'
        width = "75%"
    }
    'main'         = @{
        'padding-left'   = '70px'
        'padding-right'  = '70px'
        'padding-top'    = '5px'
        'padding-bottom' = '5px'
    }
} -Parent 'Default'
$Dashboard = New-UDDashboard -Title "Weekly Manager Accountability Form" -Theme $theme -Content {
 New-UDLayout -Columns 3 -Content {
        New-UDInput -Id "inputid" -Title "Please answer all questions to submit" -Endpoint {
            param(...

Thought this might be handy for anyone else…basically I got tasked with putting a form together with a load of questions…as they went in sets of three I split the layout to 3…I included the theme which then places these nicely in a row of three with nice spacing and alignment. I hope this helps just sorry was a tad late.

1 Like