Text Align in Ui_Buttons

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

image

CSS settings is a bit too much for simple requirement.

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

Here you find a starting point to play around

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.

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

1 Like

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.

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

place this into a template node & select:

image

<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}]

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