UDButton vertical alignment

I’m testing a layout, nothing fancy just 3 columns which I laid out using 3 UDCards and they all aligned vertically with each other as I would expect.

I then replaced one of the UDCards with a UDButton and noticed that the top of the UDButton was higher than the tops of the UDCards.

UDCard alignment

image

UDButton alignment

image

Is this expected behaviour and if so, is there a way to align the top of the button with the top of the cards?

hi @Badgerface

I’d suggest playing around with the -style param of new-udbutton.

New-UDButton -text "somettext" -style @{"margin-top" = "5px" }  

Play around with the top margin, i’d suggest inspecting the card and see which computed margin this has in the F12 menu.

Note: this requires UD version 2.8.3

If you’re having issues figuring out the CSS, give me a shout. CSS is not everyones cup of tea :slight_smile:

Hi @BoSen29

Great, thanks for that.

Got it sorted with {“margin-top” = “7px” } although if I’m understanding what I`ve just read correctly, that should be 7.25px as the root font size appears to be 14.5px?

Cheers

@BoSen29 but dont you think also that this should be handled like a bug? Create a GitHub issue!

Hi @Badgerface
I belive 7px might be correct, as the text-height shouldn’t affect the margin from the top, as it should expand downwards.

@augustin.ziegler you might think so, and check what @adam thinks.
Buttons and cards doesn’t necessarily have to have the same margins, as buttons are mainly contained by an card / grids etc. And changing this in the default theme might affect forms and stuff. In my eyes, adding manual stying on a non-cardified button is acceptable, as having an global margin on everything is not really doable when you’re working with CSS.

Imagine having all the buttons in your grid causing you to have 7 extra pixels of spacing on each row. Now you could enforce a style on buttons which are children of grids.
Ofc you could go down the rabbits hole and start manually setting all the custom margins for child-buttons of components, which in turn will probably require alot of theme-rework.

@BoSen29 - 7px looks OK to me so will leave it like that for now.

I won’t get involved in the discussion regarding this being a bug or not but it was certainly puzzling behaviour (to me anyway) and it does make me wonder about this sentence on the UD home page:
“No need to learn JavaScript, HTML or CSS.”

While I agree that it is certainly possible to create dashboards without experience in those disciplines, getting the desired results certainly appears to require some understanding of them (especially CSS).

I speak as someone who has not had to touch HTML for a very long time, I have 0 JavaScript experience and never really “got” CSS.

Nevertheless, I wrangled some CSS Styles into shape (eventually) earlier and yeah, it feels good but I was close to the limit of my patience to put it mildly. :wink:

At the end of the day, UD is a tool that could potentially be used by people who have wildly ranging levels of experience and I`m very much aware that you can’t please all the people all the time, but making it easier to get good results would surely result in more sales :grin:

Sorry I didn’t get to this thread earlier…it’s a good post…I do understand your point and your quote off of the website…however to generate the button and the card took you no JS or CSS knowledge…it was personal preference that you wanted things aligned perfectly…which I understand to get that sleek look…however there is the information out there that @adam has provided like here for instance https://docs.universaldashboard.io/look-and-feel/themes#creating-a-basic-theme but I do here what you are saying…but at the moment, for all the finer customisations you will need to tweek some CSS here and there to obtain the exact positioning you want…but that again is personal preference.
I personally find that anything is do’able in UD you just might have to think a bit differently to how you would normally solve something. If you think this is a bug, please do log it, end of the day you are a customer, so have your say :slight_smile:

@psDevUK I agree that it took 0 knowledge of JS or CSS to generate the button and card so:

image

however, I would have thought that correct alignment of elements on a page is considered a basic requirement for good design.

Ah Themes - yeah I had some fun with them yesterday whilst trying to alter the background colour of the Submit button in a UDInput.

The only way I could find to do that was using a Theme which then changed the vertical alignment of the UDCard, so it wasn’t just the properties of .ud-input .btn that needed to be changed but the top margin of .ud-input also. It seems that once a Theme is used, some of the default settings are changed as well.

If there is a way to change the background colour of the Submit button in a UDInput that does not have this effect, please could you enlighten me? I did try with a Style on New-UDInput but its entirely possible that my syntax was incorrect or I was not defining the element correctly.

As for the status of the computed margin as a bug or not, I assume that if that was changed then there would be many angry UD’ers out there who suddenly found that their Cards were no longer aligned after updating their installs of UD and that’s not a desirable outcome for anyone :wink:

Cheers

I can enlighten you with adding a specific CSS theme to just one component, and not affect any other component using the main theme…it is the awesome https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.Style
Which allows you to apply cusom CSS to any component you want, which is the question I see you are posing.
As this is an open source project with many different commits from different sources then certain things do get modified…I mean sometimes for alignment I use New-UDHtml and add <p> or <br> but again that would require some other knowledge than pure powershell knowledge. As always in life there is always more than one way to do something, I mean since using UD I have learnt a lot about various things not all related to pure powershell but it inspired me to put this together https://psdevuk.github.io/ud-flix/ which I have a lot of new blogs to write for it.
I mean there is nothing else out there on the market like universaldashboard that I know exists for powershell…the closest thing I can compare it to is Powershell Studio, which I have not used in a couple of years since I switched to UD as UD is far superior in displaying modern beautiful looking user interfaces.
I still see the alignment thing as personal preference. Yes it is good design practise but i guess not all great developers can be great designers too :grinning:

@psDevUK Thank you for the info regarding UniversalDashbaord.Style . I now have the button background style set so it’s the right colour, and no other elements were affected :+1:

Thank you also for the link to your blog site. I will definitely be having a look at it very soon :slight_smile:

I’m certainly learning, so you can teach an old dog new tricks after all and yeah, UD is certainly in a league of it’s own.

I now have a half decent looking (with all elements aligned) dashboard, just need to add the functionality :exploding_head:

Cheers

1 Like