Hi Radzen Team,
I have been replacing some checkboxes and dropdown components with options between 2 and 4 with the selectbar component to have better user experience.
Is it possible to style the selectbar options to have same ( preset) width for each option? Now the width of the option-button is dependent on the label length.
/kr
Mehmet
Hi @mcanavar,
You can use the following CSS to set the width for all items:
.ui-selectbutton .ui-button {
width: 400px;
}
Hi @enchev ,
this will style all selectbar components in the application to 400px.
What I want is to override this on the screen , I have option text that are short e.g: Yes , No , Perhaps, Maybe, it would not style well if all the buttons are 400px wide.
Could we do something with adding attribute : like
"class": "col-md-9",
"components": [
{
"attributes": [
{
"name": "class",
"value": ".ui-selectbutton .ui-button { width: 200px; }"
}
],
Hey @mcanavar,
This is just an example, you can set your own width.
Just to clarify : I know that we can add some class in the stylesheet.css to override the default .
And thank you for the example .
What I mean is perhaps better with a visual image.
The buttons "Option 1" and "Option Two" do not have equal widths ,
If we use the global css to some pixels than all the selectbar buttons will be that with, As you can see the buttons on the second selectbar control need other widht than the one's on the first row.
I only want them to be evenly width in one slectbar control and not all .
Hope you understand.
That one is a new "CSS " trick for me !
It's ok for what I want to do for now . .
Thank you !
Here is a good CSS reference:
thank you ..
I only see one problem. on template forms you have to use the field-names to be able to update and add ,
this means that on all screens with the same control and name this style is applied .. could be a con or a pro ..
The style is applied only by id and id is added as attribute only to specific SelectBar.
My mistake, overlooked that . you are right , this is perfect!
