When using the Button Loading widget from OutSystems, I want to use the option to not show the text and only show the loader when loading, but then the button shrinks to only be the size of the loader.
Without fixing the width in Service Studio, I want to the button to stay the same width as it was with the text even when the text disappears and the loader shows.
With JS this is easy enough to get the original width and then set that as the min-width, but I would like to rather use CSS only if that is an option.
Any ideas?
Hello Nicholas,
You can create a class to set your min-width and use the Extended Class option in the Button Loading Widget to add that class to the widget.
Hope it helps!
Paulo Rosário
Have you tried this?
https://www.outsystems.com/forums/discussion/69411/button-loading-widget-width-adjustment/
Just for you, I've copied the main images of that topic ;)
Thanks for the reply Martin, but that solution and question are quite different to what I am looking to do. They want to to stretch to full width, I want it to stay original width regardless of content...
It's just an example, you could use min-width there as well. Or any other width. Using this extended class will do the trick I guess.
Hi Martin, looking for what goes in there...
Something like that. You should define your min-width desired.
Hi Paulo, as I said, I don't want to set a fixed width (even a fixed min-width) in Service Studio, I want it to be dynamic and not hardcoded... What if I change the test to be shorter later on - then I would need to change that width too, would be nice if automatic.
I added my answer before your answer appeared for me :)
You can use percentage and the button will have allways the same size, if you want dynamic and the correct pixels as you have when you have text you will need a JS.
Another way to do it: use the text when IsLoading is True and add a class for text has the same color of the button when IsLoading is True, maybe this one is the easier way for what you want to achieve.