Devolutions ForumDevolutions Forum

UDCard & UDSelect - Help with formatting

UDCard & UDSelect - Help with formatting

avatar
(anonymous user)

Hello! Fairly novice to PowerShell Universal and I’m struggling with how to format content in my dashboards and get things to line up. Does anyone have any suggestions to how I could achieve this behavior below to get the UDSelect up next to the UDCard title? Thanks!

47aa50669e624ff761982cef629adab40cbf5942

New-UDCard -Title 'Parking ID' -Content {

New-UDForm -ButtonVariant 'contained' -Content {

     New-UDSelect -Id 'selParking' -DefaultValue 1 -Option {
            New-UDSelectOption -Name 'Search' -Value 1
            New-UDSelectOption -Name 'Add' -Value 2
            New-UDSelectOption -Name 'Delete' -Value 3
        } -OnChange {
            Sync-UDElement -Id 'dyParking'
        }

    New-UDDynamic -Id 'dyParking' -Content {
        $value = (Get-UDElement -Id 'selParking').value
        
    
        #Search
        if ($value -eq 1) {
            

            New-UDTextbox -Id 'txtParkingSearch' -Placeholder 'Parking ID'

        #Add 
        } elseif ($value -eq 2) {

            New-UDRow {

                New-UDColumn -SmallSize 4 -LargeSize 4 {

                    New-UDTextbox -Id 'txtParkingEmployee' -Placeholder 'Employee Name'

                }
                New-UDColumn -SmallSize 4 -LargeSize 4 {

                    New-UDTextbox -Id 'txtParkingID' -Placeholder 'Parking ID'

                }                
                
            }

        #Delete
        } elseif ($value -eq 3) {

            New-UDTextbox -Id 'txtParkingDelete' -Placeholder 'Parking ID'

        }
    } 
         
        New-UDElement -Tag 'br'
        
    }


47aa50669e624ff761982cef629adab40cbf5942.png

All Comments (6)

avatar

So personally I would not use the TITLE parameter on the card. Within the card you could create a DIV and place the text and select in the custom DIV. If this does not auto lineup then you will need to add the appropriate css to the div. Again I probably wouldn’t nest the form inside the card. But that’s just me

avatar

Personally,

I would get rid of the New-UDCard and replace it with New-UDGrid and rely on CSS for styling. I would then use New-UDHeading to display my title.

New-UDGrid -Container -ClassName GridContainer -Children {
        New-UDGrid -Item -ClassName GridItem -ExtraLargeSize 12 -Content {
            New-UDStack -Direction row -Children {
                New-UDHeading -Size 4 -Text "Parking ID"
                New-UDSelect -Id 'selParking' -DefaultValue 1 -Option {
                    New-UDSelectOption -Name 'Search' -Value 1
                    New-UDSelectOption -Name 'Add' -Value 2
                    New-UDSelectOption -Name 'Delete' -Value 3
                } -OnChange {
                    Sync-UDElement -Id 'dyParking'
                }
            }
        }
    }


CSS can be used to tweak the presentation to how you would like.

avatar

Thank you! I will keep this in mind. My main reason for using UDCard is because I have a dashboard with several different forms and having a card for each form seemed to be the cleanest way to distinguish them from each other.

avatar

Thank you! Using a DIV is looking to be a better solution. The reason I am using cards is I have several forms on one page of a dashboard and separating the forms into cards seemed like the cleanest way to distinguish them from each other.

avatar

You if you like the appearance of a udcard, you could use new-udpaper and expand on what matt advised like this:

New-UDPaper -Elevation 3 -Children {
    New-UDGrid -Container -ClassName GridContainer -Children {
        New-UDGrid -Item -ClassName GridItem -ExtraLargeSize 12 -Content {
            New-UDStack -Direction row -Children {
                New-UDHeading -Size 4 -Text "Parking ID"
                New-UDSelect -Id 'selParking' -DefaultValue 1 -Option {
                    New-UDSelectOption -Name 'Search' -Value 1
                    New-UDSelectOption -Name 'Add' -Value 2
                    New-UDSelectOption -Name 'Delete' -Value 3
                } -OnChange {
                    Sync-UDElement -Id 'dyParking'
                }
            }
        }
    }
}


3
avatar

That’s what l love about this product. There is so much you can do, and there is no one way to do it.

I used the CSS Class names to provide whatever styling I wanted.

1