New-UDGridLayout Texbox/Switch position strange

[Fabian]

Cannot Change Position of Texbox and Switch using New-UDGridLayout.
Using Version 2.6.2
Enclosed Sample-Code
Position of Texbox and Switch not like expected.
What am i doing wrong?!

Get-UDDashboard | Stop-UDDashboard

$global:mypage = New-UDPage -Name ‘Test’ -Endpoint {
$Layout = ‘{“lg”:[{“w”:5,“h”:1,“x”:1,“y”:0,“i”:“grid-element-element1”,“moved”:false,“static”:true},
{“w”:5,“h”:1,“x”:1,“y”:1,“i”:“grid-element-element2”,“moved”:false,“static”:true},
{“w”:5,“h”:1,“x”:1,“y”:2,“i”:“grid-element-element3”,“moved”:false,“static”:true},
{“w”:5,“h”:1,“x”:1,“y”:3,“i”:“grid-element-element4”,“moved”:false,“static”:true},
{“w”:5,“h”:1,“x”:1,“y”:4,“i”:“grid-element-element5”,“moved”:false,“static”:true}]}’

  New-UDGridLayout -Layout $Layout -Content {

	# Position is okay ...
    New-UDSelect -Id 'element1' -Option {                                                                                          
       New-UDSelectOption -Name "bla1" -Value "myvalue1"
       New-UDSelectOption -Name "bla2" -Value "myvalue2"
       New-UDSelectOption -Name "bla3" -Value "myvalue3"
    }

    # Position is strange ...                
    New-UDTextbox -Id 'element2' -Label 'put text here ...'

    # Position is okay ...
    New-UDButton -Id 'element3' -Text 'click me ...'

    # Position is okay ...
    New-UDCheckbox -Id 'element4' -Label 'check me ...'

    # Position is strange ...                
    New-UDSwitch -Id 'element5'

  }

}

$Dashboard = New-UDDashboard -Title “Multiselect” -Page $global:mypage
Start-UDDashboard -Dashboard $Dashboard -Port 10000 -AllowHttpForLogin # -Design

[psDevUK]

put the input inside a new-udcard and the problem seems to go away

[Fabian]

Sorry ; What do you mean? Like this?! Doesn´t solve the Problem …

New-UDCard -Endpoint {
New-UDGridLayout -Layout $Layout -Content {

	# Position is okay ...
    New-UDSelect -Id 'element1' -Option {                                                                                          
       New-UDSelectOption -Name "bla1" -Value "myvalue1"
       New-UDSelectOption -Name "bla2" -Value "myvalue2"
       New-UDSelectOption -Name "bla3" -Value "myvalue3"
    }

    # Position is strange ...                
    
    New-UDTextbox -Id 'element2' -Label 'put text here ...'
    

    # Position is okay ...
    New-UDButton -Id 'element3' -Text 'click me ...'

    # Position is okay ...
    New-UDCheckbox -Id 'element4' -Label 'check me ...'

    # Position is strange ...                
    New-UDSwitch -Id 'element5'

    }
  }

}

[psDevUK]

sorry just about to do the school run with the wife, on laptop atm which is using community version. If I get the time later (as it is my eldest daughters birthday today) I will post an example. If not will re-look at this on the weekend. Peace

P.S I think there has been a bug logged about the layout issues using the JSON formatting…have a look on github…

[psDevUK]

No my friend like this:-

Import-Module -Name UniversalDashboard.Community
Get-UDDashboard | Stop-UDDashboard

$global:mypage = New-UDPage -Name "Test" -Endpoint {
    $Layout = '{"lg":[{"w":2,"h":4,"x":0,"y":0,"i":"grid-element-element1","moved":false,"static":true},{"w":3,"h":4,"x":2,"y":0,"i":"grid-element-element2","moved":false,"static":true},{"w":2,"h":3,"x":5,"y":0,"i":"grid-element-element3","moved":false,"static":true},{"w":2,"h":3,"x":7,"y":0,"i":"grid-element-element4","moved":false,"static":true},{"w":2,"h":3,"x":9,"y":0,"i":"grid-element-element5","moved":false,"static":true}]}'

    New-UDGridLayout -Layout $Layout -Content {

        # Position is okay ...

        New-UDCard -Id 'element1' -Endpoint {
            New-UDSelect -Option {
                New-UDSelectOption -Name "bla1" -Value "myvalue1"
                New-UDSelectOption -Name "bla2" -Value "myvalue2"
                New-UDSelectOption -Name "bla3" -Value "myvalue3"
            }
        }
        New-UDCard -Id 'element2' -Endpoint {
            # Position is strange ...
            New-UDTextbox -Label 'put text here ...'
        }
        # Position is okay ...
        New-UDCard -Id 'element3' -Endpoint {
            New-UDButton -Text 'click me ...'
        }

        # Position is okay ...
        New-UDCard -Id 'element4' -Endpoint {
            New-UDCheckbox -Label 'check me ...'
        }

        # Position is strange ...
        New-UDCard -Id 'element5' -Endpoint {
            New-UDSwitch
        }

    } -Draggable -Resizable

}

$Dashboard = New-UDDashboard -Title "Multiselect" -Page $global:mypage
Start-UDDashboard -Dashboard $Dashboard -Port 8002 -Force -Design

On my laptop this shows me

Obviously you could design it going down the page…but this is how I would sort the ‘funky’ automatic display. I hope this helps. Peace

You could go crazy and look at customizing the theme for a different look same script content:-