How to style new-udselect

I want to hide a ud-select with display=none until an action is taken which would then display the new-udselect by setting its display=“block”

It doesnt seem like new-udselect allows for the style attributes

And ive tried applying a style as part of the theme by referencing the new ud-select id but the style never applies

Can this be achieved?

Hey @Srichman0128 n0128 I have tweaked any components in UD. So I not every component you can reference so you need to then right click on the component you want to tweak and choose inspect element…then you should see something like:-

.select-wrapper {
position: relative;
cursor: pointer;
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
outline: none;
height: 3rem;
line-height: 3rem;
width: 100%;
font-size: 16px;
margin: 0 0 8px;
padding: 0;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 1;

Then you need to go about creating a custom theme documented here and implement the .select-wrapper into it. If what I have suggested isn’t it, then play about with adjusting the CSS in the browser, and it shows real-time so you know what to edit in your custom theme.
I hope this makes enough sense and helps you out?

I am looking to add some blogs to so if you would like this properly written up…?


Yes i had to do that to style the current ud-select on my site

Now im trying to add another and any style i apply using that method also affects the current select which would cause my current select to be hidden and wont work

I may have to choose a different component instead of another ud-selection


As always there is more than one way…how about using UDStyle?
Do your own drop down…?

Yes that worked much appreciated!

1 Like

Now my issue is determining when a specific option is selected for the new-udelement -tag select

Basically want to grab the selected option from the new-udelement -tag select and create a new variable

But im not finding a way to determine what the current selected option is for the nee-udelement -tag select

Any help much appreciated

You cool to put a code sample up of what you got? Then sure more people will chip in.

1 Like

#select creation using new-udelement

New-UDElement -Tag “select” -id “cidrive” -Attributes @{

style = @{

border = “1px solid silver”

‘border-radius’ =".3rem"

‘padding-left’ =“8px !important”


‘margin-bottom’ = “8px !important”

width = “204% !important”



#select options

New-UDElement -Tag “option” -Content{“Select Server”}

New-UDElement -Tag “option” -Id “server1” -Content{"\shareserver1"}

New-UDElement -Tag “option” -Id “server2” -Content{"\shareserver2"}

#get value of selected option

$session:servsel = ((Get-UDElement -Id cidrive).content) | Out-String

set-UDElement -Id outputbox -attributes @{value = $session:servsel}

$session:servsel outputs:

Tag : select

Attributes : {style, ref, id}

Properties :

Events : {}

Content : {“tag”: “option” “events”: [] “content”: [

                "Select Server"

              ] "type": "element" "key": "51f35d8c-f214-47bb-abaa-ebc0b5c5a12c" "onMount": null "id": 

              "28f4f8d2-5cd4-4faf-93d3-f037db1e8b03" "refreshInterval": 5 "autoRefresh": false "hasCallback": 

              false, "tag": "option" "events": [] "content": [


              ] "type": "element" "key": "3e887b6a-a6da-42f8-a4d7-d9270eccb258" "onMount": null "id": "server1" 

              "refreshInterval": 5 "autoRefresh": false "hasCallback": false, "tag": "option" "events": [] 

              "content": [


              ] "type": "element" "key": "53d44ea8-e197-4707-97aa-4143117767fb" "onMount": null "id": "server2" 

              "refreshInterval": 5 "autoRefresh": false "hasCallback": false}

JavaScriptPath :

JavaScriptId :

ComponentName :

ModuleName :

Type : element

Key : 0138ed3b-64be-4c8b-9915-691e5d4384ed

OnMount :

Id : cidrive

Callback :

RefreshInterval : 0

AutoRefresh : False

Error :

HasCallback : False

So this is how I roll with selects:-

New-UDInput -Title "Select" -Id "card1" -Content {
  New-UDInputField -Type 'select' -Name 'SERVER' -Values @("Server1","Server2","Server3")
            } -Endpoint {
				Set-UDElement -Id 'output' -Content {$Server}
				$Session:ServerName = $Server
				@("chart","card2","card3","card4") | Sync-UDElement

This would then update “chart” “card2” “card3” and “card4” (components that I have with those named ID parameters) with the value selected from the drop down menu.

I hope this helps or gives some ideas on how else you can achieve this. Peace