Set the SHAPE of a Dashboard BUTTON?

Dashboard
1

Is it possible at all to control the roundness of the corners on the Dashboard "Button"? Or, do you have to use something else to deploy a rounded edge button? or to make a circle push button out of a 1x1 size?

Kind Regards,
hp_apcc

2

You could use a ui_template set to head and add some targeted styling. In particular...

.round-button {
  border-radius: 50%
}
3

@Steve-Mcl ,
Thanks for the help. I did this in a very absolute means, as I know no other... I put in a template node the exact thing you have there.

.round-button {
  border-radius: 50%
}

and linked the node to my button, even put on it an inject node. and nothing happens.... how do I deploy this on a button. I'm missing it.

@tree-frog

4

You need to use a selector that matches your buttons. Use Devtools to help you determine the selector.

Right-click the element in the page and click 'inspect' in the dialog that pops up. The Developer Tools window will open.
In the Elements tab of Developer Tools, right-click the highlighted element and select Copy > Copy selector

Use that copied selector instead of the generic .round-button class example I provided.

5

As Steve has said, just add the styling to a ui_template node like the below image, setting the Template type set to Added to site <head> section.

No, don't link it into your flow, just leave the ui-template node unconnected, and it will influence the button styling.

<style>
.md-button {
  border-radius: 20%
}
</style>

style3

6

OK, Getting there.
I tried to set it to the group since I don't really want all buttons on the project affected. However, instead of the change applied to just the group, it affects then entire page. AGGHHH!

Any hints on how to just affect the one group? and not the entire page?

Thanks!

7

This might be interesting talk for you. Q: Tiles type panels

1 Like
8

Replace .md-button in my screenshot with what Steve suggested above.

So for example, from my dashboard;

<style>
#Realtime_Power_Chart_cards > md-card:nth-child(11) > button {
  border-radius: 20%
}
</style>
9

The nth-child by count is what you get if you copy the selector and it definitely selects that and only target. But if you still developing your dashboard and if you change anything in this card the element count and order may change and the selector needs also adjustments.
So I'd avoid it if possible and try to achieve with more stable solution..

But as said- there is nothing wrong with it.

1 Like
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.