Help With Styling

I am pretty much there exept for when using forms inside a card things go a bit wonky.

so I have the following:

Theme:

@{
light = @{
palette = @{
Common = @{
black = ‘#000
white = ‘#fff
}
primary = @{
main = ‘#939b38
light = ‘#7986cb
dark = ‘#303f9f
contrastText = ‘#fff
}
secondary = @{
light = ‘#ff4081
main = ‘#f50057
dark = ‘#c51162
contrastText = ‘#fff
}
error = @{
light = ‘#e57373
main = ‘#f44336
dark = ‘#d32f2f
contrastText = ‘#fff
}
warning = @{
light = ‘#ffb74d
main = ‘#ff9800
dark = ‘#f57c00
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
info = @{
light = ‘#64b5f6
main = ‘#2196f3
dark = ‘#1976d2
contrastText = ‘#fff
}
success = @{
light = ‘#81c784
main = ‘#4caf50
dark = ‘#388e3c
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
grey = @{
50 = ‘#fafafa
100 = ‘#f5f5f5
200 = ‘#eeeeee
300 = ‘#e0e0e0
400 = ‘#bdbdbd
500 = ‘#9e9e9e
600 = ‘#757575
700 = ‘#616161
800 = ‘#424242
900 = ‘#212121
A100 = ‘#d5d5d5
A200 = ‘#aaaaaa
A400 = ‘#303030
A700 = ‘#616161
contrastThreshold = ‘3’
getContrastText = ‘f E()’
augmentColor = ‘f B()’
tonalOffset = ‘0.2’
}
text = @{
primary = ‘#fff
secondary = ‘rgba(255, 255, 255, 0.7)’
disabled = ‘rgba(255, 255, 255, 0.5)’
hint = ‘rgba(255, 255, 255, 0.5)’
icon = ‘rgba(255, 255, 255, 0.5)’
divider = ‘rgba(255, 255, 255, 0.12)’
}
background = @{
default = ‘#303030
paper = ‘#424242
}
action= @{
active = ‘#fff
hover = ‘rgba(255, 255, 255, 0.08)’
hoverOpacity = ‘0.08’
selected = ‘rgba(255, 255, 255, 0.16)’
selectedOpacity = ‘0.16’
disabled = ‘rgba(255, 255, 255, 0.3)’
disabledBackground = ‘rgba(255, 255, 255, 0.12)’
disabledOpacity = ‘0.38’
focus = ‘rgba(255, 255, 255, 0.12)’
focusOpacity = ‘0.12’
activatedOpacity = ‘0.24’
}
}
}
dark = @{
palette = @{
Common = @{
black = ‘#000
white = ‘#fff
}
primary = @{
main = ‘#939b38
light = ‘#7986cb
dark = ‘#303f9f
contrastText = ‘#fff
}
secondary = @{
light = ‘#ff4081
main = ‘#f50057
dark = ‘#c51162
contrastText = ‘#fff
}
error = @{
light = ‘#e57373
main = ‘#f44336
dark = ‘#d32f2f
contrastText = ‘#fff
}
warning = @{
light = ‘#ffb74d
main = ‘#ff9800
dark = ‘#f57c00
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
info = @{
light = ‘#64b5f6
main = ‘#2196f3
dark = ‘#1976d2
contrastText = ‘#fff
}
success = @{
light = ‘#81c784
main = ‘#4caf50
dark = ‘#388e3c
contrastText = ‘rgba(0, 0, 0, 0.87)’
}
grey = @{
50 = ‘#fafafa
100 = ‘#f5f5f5
200 = ‘#eeeeee
300 = ‘#e0e0e0
400 = ‘#bdbdbd
500 = ‘#9e9e9e
600 = ‘#757575
700 = ‘#616161
800 = ‘#424242
900 = ‘#212121
A100 = ‘#d5d5d5
A200 = ‘#aaaaaa
A400 = ‘#303030
A700 = ‘#616161
contrastThreshold = ‘3’
getContrastText = ‘f E()’
augmentColor = ‘f B()’
tonalOffset = ‘0.2’
}
text = @{
primary = ‘rgba(0, 0, 0, 0.87)’
secondary = ‘rgba(0, 0, 0, 0.54)’
disabled = ‘rgba(0, 0, 0, 0.38)’
hint = ‘rgba(0, 0, 0, 0.38)’
divider = ‘rgba(0, 0, 0, 0.12)’
}
background = @{
default = ‘#fafafa
paper = ‘#fff
}
action= @{
active = ‘rgba(0, 0, 0, 0.54)’
hover = ‘rgba(0, 0, 0, 0.04)’
hoverOpacity = ‘0.04’
selected = ‘rgba(0, 0, 0, 0.08)’
selectedOpacity = ‘0.8’
disabled = ‘rgba(0, 0, 0, 0.26)’
disabledBackground = ‘rgba(0, 0, 0, 0.12)’
disabledOpacity = ‘0.38’
focus = ‘rgba(0, 0, 0, 0.12)’
focusOpacity = ‘0.12’
activatedOpacity = ‘0.12’
}
}
}
}

Style:

$GlobalStyle =’
#logoImage{
max-width: auto;
max-height: auto;
display: block;
margin-left: -5%;
}
.MuiCardContent-root {
justify-content: center;
}
.MuiPaper-root {
text-align: center;
margin-left: 10%;
margin-right: 10%;
border-radius: 20px;
}
.MuiTypography-body1 {
font-size: 18px;
font-weight: 600;
font-family: cursive
}
.MuiTypography-body2 {
font-size: 14px;
font-weight: 300;
}

Dashboard

$UDScriptRoot = $PSScriptRoot
New-UDDashboard -theme (. “$UDScriptRoot\Theme\Theme.ps1”) -Title “EdgeCloud Services” -Content {
. “$UDScriptRoot\Theme\Style.ps1”
New-UDTabs -RenderOnActive -Tabs {
foreach ($Devolutions_Tab in (Get-ChildItem “$UDScriptRoot\pages” -Recurse -filter *.ps1)) {
New-UDTab -Text $Devolutions_Tab.name.split(’.’)[0] -Content {. $Devolutions_Tab.fullname}
}
}
}

Everything loads as expected and while all my other pages look great when I use a form the layout is a is off and it varies on each tab for example:

While centered I need to padd the Imputs to center them to the title. Thats not a problem I know how to do that. But as you can see the second select has the wording cut off. How do I make sure its displayed fully? If I dont use a card as a wrapper I dont seem to get this issue.

Secondly when we go to the next tab things get weirder:

As you can see the Validate and Button are off to the left.

Does anyone have any ideas or can help me fix this as the site looks exactly how I want it now just with these couple of issues.

Thanks

Hello @SnV personally I would change your title to Help With Styling but as for your question I would say it is CSS related, and hovering around in the inspect this element when it is on screen will help you find the CSS style name this is called, then you should hopefully come across the setting which is defining the position, copy that rule, put it into a hashtable and you should be good to go

1 Like

I tried that for a while before posting and could not find the setting that was doing this. I would agree its to do with the CSS but for the life of me I cant find why. Its very strange that one tab works but the other does not and they are both using UDForms with the same global style so its very strange that one works and the other does not.

I actually think it might be to do with UDforms (inside cards even) as when I select items that are longer and it stretches the select item, the form moves to the left on its own.

Looking further I actually think it might be the UDCOLUM and UDROW formatting I have useed on the form to align everything. I am playing with that now and things defo change strangly with that.

I will look into this more.

1 Like

Taking out all the Colums and rows still does the same thing:

Ok so on further analysis it seems to be this CSS

text-align: center;

This aligns everything center other than the button, nothing else I have tried centers the button does anyone know what item I should change to get the button to move.

Ok I fixed it, had to use the following:

.MuiGrid-grid-xs-6 {
margin: auto;
}

2 Likes