Hi,
I have a button that includes an icon, and I want to align the icon to the left. I’ve also tried applying inline styles, but they don’t seem to have any effect.
Could you please suggest how I can properly align the icon to the left?
Thanks.
Try this CSS to the advanced style sheet and selecting the style class buttoniconleft on the button.
.psc-buttoniconleft .text { flex-grow: 1; }
/*Optional to make the icon not hard pressed against the edge*/
.psc-buttoniconleft svg { margin-left: 10px; }
4 Likes
Hi,
Thanks for your help.
I’ve already created an advanced style class (stylesheet.css). Now I’d like to create another advanced class, but when I try, it only creates a regular style class with limited options.
Could you please advise how I can create another “buttoniconleft“ advanced style class instead of the default one?
The stylesheet is not a class, it's a full css sheet. You can add css rules for as many classes as you'd like in there.
What @dgillbee suggested is creating a regular style class called buttoniconleft, then adding advanced rules for this class in the stylesheet.
Note that you don't HAVE TO create the style class. It's useful to do so to make it appear in the class selection dropdown/menu.
If you don't create it, you can still apply that class to a component by typing the class name.
1 Like
The stylesheet and perspective style classes are completely independent of each other, although they can equally define the styles for the same css selectors.
For example, the underlying css class selector generated for a perspective style with path "Buttons/Style1" would be psc-Buttons\/Style1. You can add more advanced styling to this class in the adv stylesheet for a class already defined as a perspective style by adding this to your stylesheet:
.psc-Buttons\/Style1{
backgound-color: #111;
}
This would add a background colour on top of any other styles defined within the same perspective style class. I would always recommend adding a perspective style for each and every one of the class selectors you add into your stylesheet so that they appear in the classes dropdown menu in view components.
1 Like
Thanks a lot.
Thank you very much for your help! @dgillbee
I followed the @pascal.fragnoud instructions and implemented it as suggested. Now it works exactly as we wanted.
You should mark @dgillbee 's answer as the solution, so it appears in the first post for easy access.
1 Like
