Hi,
I need assistance on aligning buttongroup3 items vertically instead of default horizontal alignment. I am using Webpatterns -Controls-ButtonGroup3 widget which contains 3 radiobuttons in my traditional web app.
This is the current output :
Expected :
Hi @Avinash A,
To make vertical you have to change this CSS below screenshot this is default class of outsystem so you can make one wrapper class for this and change this CSS that i highlighted below image.
For space between buttons use this css:
Hope this will helps you any concern please let me know!
Regards,
Rajat
@Rajat Agrawal Thanks for your prompt response. Can you please share the CSS class which you've added. I have tried to add the class, but it didn't work as expected. I am not sure whether it has anything to do with the widget which I am using. Because I am using legacy webpatterns and you've used the modern design which allows to add the css for the widget. But, ButtonGroup3 doesn't allow. I have also tried to add it to it's parent container. Doesn't work.
You can share you OML if possible so i can change CSS in that and check how it is working.
Same one sample I have created for your understanding please refer below OML.
Hope this will help you!!
@Rajat Agrawal Sorry, I cannot share the file. I have tried your suggested way of CSS changes, but it didn't have any impact in the UI. I am not that good at CSS or frontend, but please clarify on the below :
In my case, the ButtonGroup is contained within a container within the web block, which is as below :
The container has some CSS class coming from themes file. I need to override those css class and need to pass the class which you've shared. So if I add the class which you've shared to the containing web block, it should override right ?
Yes, because button group having outsystem default class that we should override by making wrapper class in that what ever i did in the sample OML you have done same in your app.
Any concern please let me know!
I have overridden the css class by adding the css which you've shared under styles property of the containing block. But it doesn't override the existing class of the container within the block. What will be the possible solution ?
Can you inspect and share me the CSS what you have done.
I have added the class to the container as you did in sample application. But I could see, something going wrong.
But inside that class you didn't applied css what i did in sample OML.
I have added the css in styles properties of the web block and applied the css class to the container of buttongroup.
You have added wrong class after wrapper class you button class is different you copied same as i did but you have to use this class below image screenshot same you copied now. in you app.
your class name is:
ButtonGroup instead button-group.
I have some other class called ButtonGroup.
Somehow this one is getting called for buttongroup widget which I am using for Yes No radio buttons. The class name which you've added in your css is not getting called here.
I have added the class same as you did in sample app. Below screenshot for your reference :
I need all the existing css class to be there along with this vertical alignment class. But for this all other classes getting applied, but not this "button-wrap" ".button-group"
.button-wrap .ButtonGroup{
display: inline-block;
}
Use this and check.
Hi @Rajat Agrawal,
I have tried the way you have suggested, but it's not working for the UI widget which I am using.
FYI : I am using the widget which is shown in the below screenshot (taken from Webpatterns - ButtonGroup3) , not OutsystemsUIWeb - ButtonGroup (which you've used in your sample application).
When I tried with OutsystemsUIWeb - buttongroup widget, its working fine for me, as expected. But not working for the ButtonGroup3 widget which I am using from WebPatterns.