Center New-UDSwitch

avatar

I am working on creating my first app and am struggling to center a New-UDSwitch position inside of a card. Currently I have only been able to center the text box and the save button. The switch itself is always left justified. Hope someone can point me in the right direction.

New-UDCard -Content {

New-UDStack -Content {

New-UDSwitch -Id ‘Automatic IP Rotation’ -Checked $connection.result.ipChangeEnabled -CheckedLabel ‘On’ -UncheckedLabel ‘Off’ -OnChange {

if ($EventData -eq $false) {

# Switch is off

Set-UDElement -Id ‘Automatic IP Rotation Textbox’ -Attributes @{disabled = $true}

Set-UDElement -Id ‘Automatic IP Rotation Textbox’ -Attributes @{value = ‘’}

Set-UDElement -Id ‘SaveButton’ -Attributes @{disabled = $true}

} elseif ($EventData -eq $true) {

# Switch is on

Set-UDElement -Id ‘Automatic IP Rotation Textbox’ -Attributes @{disabled = $false}

Set-UDElement -Id ‘SaveButton’ -Attributes @{disabled = $false}

}

}

New-UDTextbox -Id ‘Automatic IP Rotation Textbox’ -Label ‘Rotation Frequency’ -Value $textboxValue -Disabled:$textboxDisabled

New-UDCardFooter -Content {New-UDButton -Variant ‘outlined’ -Text ‘Save’ -Id ‘SaveButton’ -Disabled:$saveButtonDisabled}

} -Id ‘verticalstack’ -AlignItems ‘center’ -Direction ‘column’

} -Title ‘Automatic IP Rotation’ -Style @{

maxWidth = “300px”;

margin = “0 0”;

}

Product: PowerShell Universal
Version: 5.12

All Comments (2)

avatar

I messed with this a bit, but it looks like that the switch implementation is going to be pretty hard to center based on how the labels are implemented. If you turn of the labels, it might be easier. That said, I’ve opened an issue here: Center UDSwitch · Issue #4234 · ironmansoftware/powershell-universal · GitHub

Adam Driscoll

PowerShell Expert and Software Architect at Devolutions

avatar

Thank you for opening an issue tracker for me. I have worked around this issue in the interim by changing the wording of the switch positions and resizing the card.