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 input.select-dropdown {
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 https://docs.universaldashboard.io/look-and-feel/themes#creating-a-basic-theme and implement the .select-wrapper input.select-dropdown 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 https://psdevuk.github.io/ud-flix/ 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
Thanks
As always there is more than one way…how about using UDStyle?
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.Style
Do your own drop down…?
Yes that worked much appreciated!
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.
#select creation using new-udelement
New-UDElement -Tag “select” -id “cidrive” -Attributes @{
style = @{
border = “1px solid silver”
‘border-radius’ =".3rem"
‘padding-left’ =“8px !important”
display=“none”
‘margin-bottom’ = “8px !important”
width = “204% !important”
}
}-Content{
#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": [
"\\\\shareserver1"
] "type": "element" "key": "3e887b6a-a6da-42f8-a4d7-d9270eccb258" "onMount": null "id": "server1"
"refreshInterval": 5 "autoRefresh": false "hasCallback": false, "tag": "option" "events": []
"content": [
"\\\\shareserver2"
] "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 {
param($Server)
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