Applying CSS to New-UDInputField

Universal Dashboard Universal Dashboard Help
1

I have an input field that is going to accept a URL. By default, the UDInputField doesn’t take up the whole width of the card. Is it possible to apply CSS to only the UDInputField? I don’t want this to be across the whole theme.

I’ve tried putting the following code in various places within the card, the udinput, etc… to no avail…

			New-UDHtml -markup "<style>
				'.input-field' = {
					'width' = '100%'
				}</style>"

If I create a new theme and apply it there, it works fine. But I don’t want this everywhere.

Here is my code (without the above)

		New-UDCard -Id "card_TinyURL" -Title "Create a TinyURL (https://tinyurl.com/)" -EndPoint {
			New-UDInput -Title "" -Content {	
				New-UDInputField -Type textbox -Name 'txtTinyURL' -PlaceHolder 'URL' -DefaultValue ""
			} -EndPoint {
					param ($txtTinyURL)
					$Session:TheTinyURL = Get-TinyURL $txtTinyURL
					Sync-UDElement -Id "eTinyURL"
				} #New-UDInput EndPoint
			New-UDElement -Id "eTinyURL" -Tag Div -EndPoint {
				If (!(IsNull($Session:TheTinyURL))) {
					New-UDHeading -Text "TinyURL: $Session:TheTinyURL"
				}
			}
		}

Thanks!

2

I literally did exactly this today!
You want to grab UDStyle (https://github.com/ironmansoftware/ud-style)

New-UDCard -Id "card_TinyURL" -Title "Create a TinyURL (https://tinyurl.com/)" -EndPoint {
	New-UDStyle -ID "UDStyle_txtTinyURL" -Style '
							.input-field {
								width : 100%;
							}' -Content {
		New-UDInput -Title "" -Content {	
			New-UDInputField -Type textbox -Name 'txtTinyURL' -PlaceHolder 'URL' -DefaultValue ""
		} -EndPoint {
				param ($txtTinyURL)
				$Session:TheTinyURL = Get-TinyURL $txtTinyURL
				Sync-UDElement -Id "eTinyURL"
			} #New-UDInput EndPoint
		New-UDElement -Id "eTinyURL" -Tag Div -EndPoint {
			If ($Session:TheTinyURL) {
				New-UDHeading -Text "TinyURL: $Session:TheTinyURL"
			}
		}
	}
}

gav

2 Likes
3

You are the man! Thank you.

V.