The rx.button component does not allow user to position it's text
HongyuHansonYao opened this issue · comments
a feature like
rx.button(text="sample", align_text="left")
would be great.
Buttons automatically stretch to fit your text - so for aligning text to the right you have to manually set a larger size for the button to see the difference. Also, text is automatically set to the minimal size required, so you have to set an rx.text()
element with a width of 100% (inside the button, so it will be the width of the button) - this allows the text to move (as otherwise the element is just the size of the text, so you can't see the difference):
rx.button(
rx.text( # text element
"Text", # text in button
width="100%" # make the text the width of the button
),
text_align="left", # text align
width="25%" # manually making button larger
)
Buttons automatically stretch to fit your text - so for aligning text to the right you have to manually set a larger size for the button to see the difference. Also, text is automatically set to the minimal size required, so you have to set an
rx.text()
element with a width of 100% (inside the button, so it will be the width of the button) - this allows the text to move (as otherwise the element is just the size of the text, so you can't see the difference):rx.button( rx.text( # text element "Text", # text in button width="100%" # make the text the width of the button ), text_align="left", # text align width="25%" # manually making button larger )
This is exactly what I've been searching for, thanks man!!!
No problem!
@Alek99 Close pls 👌