Hello ,
I am using the Button with 3 lines text with different size , it works
but by defautl the text is centered .
It is possible to align the first line on left , second line in midle and line 3 on the right ?
Thanks
Hello and welcome!
As it is unknown how you managed the button to have 3 lines of text, hard to advise anything solid.
But anyway, I took the challenge to create one using the regular button component and CSS override. Seems possible but a bit impractical.
[{"id":"6e86a364561f3fec","type":"ui-button","z":"9ab81d258b54a577","group":"010933c4bf794f02","name":"Crazy Button","label":"<div>first</div><div style=\"anchor-name:--mid\">second</div><div>third</div>","order":1,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"crazy-button","icon":"account","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":570,"y":200,"wires":[[]]},{"id":"1900c8abd406bd30","type":"ui-template","z":"9ab81d258b54a577","group":"","page":"","ui":"cf21e7dda9e29be4","name":"","order":0,"width":0,"height":0,"head":"","format":".crazy-button .v-btn__content{\n width:100%;\n}\n.crazy-button .v-btn__content span{\n width:100%;\n}\n.crazy-button .v-btn__content span div{\n justify-self: center;\n}\n\n.crazy-button .v-btn__content span div:first-child{\n justify-self: start;\n font-size: smaller;\n}\n.crazy-button .v-btn__content span div:last-child{\n justify-self: end;\n font-size: smaller;\n}\n.crazy-button .v-btn__prepend{\n position-anchor: --mid;\n position: absolute;\n left: anchor(left);\n translate: -100%;\n color:#85ff00;\n}\n.crazy-button .v-btn__prepend .v-icon{\n --v-icon-size-multiplier: 1.5;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":560,"y":160,"wires":[[]]},{"id":"010933c4bf794f02","type":"ui-group","name":"Group 1","page":"a3c04197f8e84242","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":true,"disabled":false,"groupType":"default"},{"id":"cf21e7dda9e29be4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"a3c04197f8e84242","type":"ui-page","name":"Page 1","ui":"cf21e7dda9e29be4","path":"/page1","icon":"home","layout":"grid","theme":"ad2f1c2d77757e4a","breakpoints":[{"name":"Default","px":0,"cols":3},{"name":"Tablet","px":576,"cols":6},{"name":"Small Desktop","px":768,"cols":9},{"name":"Desktop","px":1024,"cols":12}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"ad2f1c2d77757e4a","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
1 Like
Thank you , it is a starting point
I started with a different method example attached without thw template ,everything works well beside the left and right alignement.
Any suggestion ?
flows (5).json (6.0 KB)
Even there are selectors to modify first line and last line
It doesn't work inside the inline element (span) so the button's build up need to be changed a lot to achieve anything this way.
I don't have too much of time to dig in deeper.
Obvious solution is to make such components with ui_template so you can adjust all needed properties and make it responsive in the way you like and of course you can make it behave in the way you actually need.
Fighting with ready made components is fun but not very constructive way of getting things done..
Great job
Thanks a lot
