Text Align in Ui_Buttons

[smanjunath211]

Is it possible to have a simple text layout settings in ui_button similar to ui_text ?

CSS settings is a bit too much for simple requirement.

[Christian-Me]

The Dashboard is committed to the material design style and what you wish for is listed as a don’t

Common buttons – Material Design 3

Here you find a starting point to play around

Button text forced to uppercase

For the first time I am using a dashboard button and I notice that the text on the button is always in uppercase, whatever I put in the button configuration. Is that expected? Node-RED version: v1.0.2 Node.js version: v10.18.1 Dashboard version 2.17.1 Running on Ubuntu.

[smanjunath211]

I really don't understand the material design aspect and may be I am not supposed to be here if i don't. my simple question was if it is possible to have the feature in a Text node as shown in my original post, why not have in a button ? i know it is eventually possible by going through all the complicated template node or CSS thing, but is it not node red supposed to be easy going on the not so code literate folks like me.

[Christian-Me]

The dashboard is based on https://material.angular.io/ and therefore the core dashboard nodes are committed to the material design scheme.

Your feature request is totally valid but I believe will not be implemented (I asked a similar question before). Especially because the lifespan of the dashboard is not endless: [ANNOUNCE] Node-RED-Dashboard 3.0.4

I'm also not happy with all rules in the material design scheme (especially buttons screaming at the user in bold capital letters) but: "You make the rules to beak the rules" - and that is why you can use the template node to play around with most aspects of the dashboard.

Sorry

And it is totally ok to ask! Sometimes the answer is not satisfying. I only tried to point you to a solution.

Chris

[smanjunath211]

Thanks for the prompt reply. Its time to get around the template node. would be happy if you could direct me to a starting point on the template node.

[Christian-Me]

I obeyed the rules ... but there is always a way as I tried to point you to:

Button text forced to uppercase

you can add the following to a ui_template node set with template style "Added to site head section": <style> button{ text-transform: none !important; } </style>

place this into a template node & select:

<style>
    button {
        text-transform: none !important;
        text-align: left !important;
        padding: 0px 10px !important;
    }
</style>

you can play arround with the HTML parameters as you like. Building a UI around all of them and maintain them is a lot of work and will never please everybody. So to stick to an accepted set of rules and give a way to break them is totally understandable.

!important is "important" this prevents your properties to be overwritten later.

[{"id":"643d17deb8e3a719","type":"ui_button","z":"db39bbbe01b608ed","name":"","group":"e8592788a2921318","order":2,"width":0,"height":0,"passthru":false,"label":"Test me 😁","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":950,"y":300,"wires":[[]]},{"id":"736d918fa650ae76","type":"ui_template","z":"db39bbbe01b608ed","group":"e8592788a2921318","name":"Style Button","order":3,"width":0,"height":0,"format":"<style>\n    button {\n        text-transform: none !important;\n        text-align: left !important;\n        padding: 0px 10px !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":950,"y":340,"wires":[[]]},{"id":"e8592788a2921318","type":"ui_group","name":"Basics","tab":"3c1f8373e77c2cdd","order":1,"disp":true,"width":"20","collapse":true},{"id":"3c1f8373e77c2cdd","type":"ui_tab","name":"uPlot","icon":"dashboard","order":1,"disabled":false,"hidden":false}]