Help with formatting New-UDSelect

[guy]

Does anyone know how to adjust the width of the drop down menu when using New-UDSelect/New-UDSelectOption?

I have attempted to adjust the width using CSS and have not yet gotten it to change.

Here is a sample of code.

New-UDSelect -Option {
                    foreach ($OU in $Cache:OUs) {
                        New-UDSelectOption -Name $OU.DistinguishedName -Value 
$OU.DistinguishedName
                    }#end foreach

Here is what I have already tried.

'.dropdown-content' = @{
    'width' = 'auto'
    'height' = 'auto'
}

'.select-dropdown' = @{
    'width' = 'auto'
    'height' = 'auto'
}

Thanks,
guy

[psDevUK]

Hello mate. Just for the record what version of UD are you using? This is the css behind the formatting here

[2.5.2] New-UDInput differently formatted

I ended up with a workaround for now in my theme. '.card-content' = @{ 'display' = 'grid' }

Have a cycle through display options. Peace

[guy]

Hi @psDevUK I am on version 2.6.1.

[psDevUK]

Get yo’self on 2.6.2 thats the latest and greatest with fixes…I will knock up a demo form two ticks…

[psDevUK]

Ok @guy here you go buddy try this for example sakes:-

Import-module -name UniversalDashboard.Community
$Theme = New-UDTheme -Name "Basic" -Definition @{
    '.card-content' = @{
        'display' = 'inline-grid'
    }
} -Parent "Default"
Get-uddashboard | Stop-uddashboard
$Dashboard = New-UDDashboard -Title "Hello, World!" -Theme $Theme -Content {
    New-UDHeading -Text "Hello, World!" -Size 1
    New-UDRow -Columns {
        New-UDColumn -size 6 -Content {
            New-UDInput -Title "Simple Form" -Id "Form" -Content {
                New-UDInputField -Type 'textbox' -Name 'Email' -Placeholder 'Email Address'
                New-UDInputField -Type 'checkbox' -Name 'Newsletter' -Placeholder 'Sign up for newsletter'
                New-UDInputField -Type 'select' -Name 'FavoriteLanguage' -Placeholder 'Favorite Programming Language' -Values @("PowerShell", "Python", "C#")
                New-UDInputField -Type 'radioButtons' -Name 'FavoriteEditor' -Placeholder @("Visual Studio", "Visual Studio Code", "Notepad") -Values @("VS", "VSC", "NP")
                New-UDInputField -Type 'password' -Name 'password' -Placeholder 'Password'
                New-UDInputField -Type 'textarea' -Name 'notes' -Placeholder 'Additional Notes'
            } -Endpoint {
                param($Email, $Newsletter, $FavoriteLanguage, $FavoriteEditor, $password, $notes)
            }
        }
    }
}
Start-UDDashboard -Dashboard $Dashboard -Port 12345

This looks like

Head over to poshud and @adam is using the DISPLAY = BLOCK css and has nicely formatted side-by-side input, but on my screen for this example it looked messy so I used INLINE-GRID

I hope this helps a brother out! Peace

[guy]

Thanks for the input. I upgraded to version 2.6.2, and also changed the value of “Display”. I tested using both grid, and box. I have still not yet gotten this to work. Here is a screenshot of what I am trying to fix. It may be a little hard to understand since I had to redact sensitive info.

I would like to widen the width of the drop down menu so it displays more of the text. Currently it is truncating it to multiple lines. Which makes it difficult to read and choose the option you are looking for.

Thanks again for your input.

[psDevUK]

Ahhhh so I have changed DISPLAY = GRID and changed the column size to 12 and I have a really big drop-down:-

So is it the fact your column that is nesting the select needs to be a bigger size? Make those to changes to the demo code, run the demo and see the results yourself this is a whoppa dropdown in size

[guy]

Basically what I have;

New-UDLayout -Columns 3 {
     New-UDCard -Title "Move The User Account To OU '" -BackgroundColor '#5583D2' -FontColor white -Content {
            if ($null -ne $Session:SelectedUserSAN) {
                $CurrentOU = Get-ADUser -identity $Session:SelectedUserSAN -Properties canonicalName | Select-Object @{Name='OU';Expression={$_.DistinguishedName.Split(',')[($_.Name -split ',').count..$($_.DistinguishedName.Split(',')).count] -join ','}}
                $OUHeadingMessage = "$Session:SelectedUserName is located in the following: " + $CurrentOU.OU
                New-UDHeading -Text $OUHeadingMessage
                New-UDSelect -Option {
                    foreach ($OU in $Cache:OUs) {
                        New-UDSelectOption -Name $OU.DistinguishedName -Value $OU.DistinguishedName
                    }#end foreach
                } -OnChange {$Session:OU = $EventData}
                New-UDRow -Columns {
                New-UDColumn -SmallOffset 4 -SmallSize 4 -Content {
                    New-UDButton -Text "Move" -OnClick {
                        try{
                            Move-ADObject -Identity $Session:ObjectGUID -TargetPath $Session:OU -Confirm:$false
                            Show-UDToast -Title "Move User" -TitleColor '#00529b' -Message "$Session:SelectedUserName was succesfully moved to $Session:OU . " -MessageColor 'black' -BackgroundColor '#64dd17' -Duration 9000 -Position center -Overlay
                            Sync-UDElement -Id 'DivBox2'
                            #Write-EventLog
                        }#end try
                        catch {
                            $OUError = $_.Exception.Message
                            Show-UDToast -Title "Move User" -TitleColor '#00529b' -Message "Error: Unable to move $Session:SelectedUserName to $Session:OU. The error is: $OUError " -MessageColor 'Black' -BackgroundColor '#E53935' -Duration 9000 -Position center -Overlay
                            #Write-EventLog
                        }#end catch
                    }#end udbutton onclick
                }#end udcolumn
            }#end udrow
        }#end if
     }#end udcard Move User
}

I also have a bunch of additional cards nested under the same UDLayout.

I like the current layout and wanted to avoid having to change it. So I thought I could adjust the width of the UDSelect by using CSS. I unfortunately don’t know CSS at all. I did however get it close to what I want by adding the following to my theme file.

'.dropdown-content' = @{
    postion = 'relative'
}

I’ll probably just take your advice and change the layout up a little. Thanks for being so willing to jump in and help!

guy

[psDevUK]

No worries man…well it’s just gone midnight where I’m at so I’m off to bed. But as you kindly provided your layout I will see what I can do by inspecting some elements…

[guy]

I just wanted to provide an update. I was able to get what I needed by adding the following to my theme file.

'.dropdown-content' = @{
    'min-width' = '500px'
}

This adjusted the width of the dropdown when it is opened. The change did also set the value across all drop downs as well in my site. I wish I knew how to set it for just the one, but oh well it got me what I needed.

[Omzig]

I was able to stop it from expanding too far by wrapping it in a UDElement

New-UDElement -Id myDiv -Tag div -Content {
        New-UDSelect -Label 'Theme' -Id theme -Option {
            $themeData = Get-UDTheme
            foreach ($theme in $themeData) {
                New-UDSelectOption -Name $theme -Value $theme
            }
        } -OnChange { 
            if ($eventdata) {
                Set-UDTheme -Name $eventdata -Variant dark 
            }
        }
    }