How to put the text below radio button?

Anvil Q&A
#1

Is it possible to edit (or CSS) default radio button component?
To have it like:

     *     *     *     *     *
   Text1 Text2 Text3 Text4 Text5
#2

Welcome to the forum!

This would almost certainly be CSS oriented. You’ll generally want to look for the CSS that would do the trick when using straight HTML, and then adapt that to the structure of the elements that Anvil produces.

You can use browser tools to inspect the structure of the elements of a running program. In the case of radio buttons, there’s a div that surrounds a label and an input type=radio element. The div itself is the one that gets the Anvil classes, such as roles, so you’d need to write your role CSS to target labels and inputs under that div (which has the class radio).

Something like this:

.radio label {
}
.radio input[type=radio] {
}

You’d need to work out the CSS to put in there. I tried a couple of options, and none worked very well (probably due to conflicts with other Anvil CSS), but there’ll be a CSS oriented solution.

I’m generally a copy and paste CSS user, so if you can’t work out the CSS to put into the above yourself, hopefully one of the CSS experts on the forum can help.

2 Likes
#4

Something like this should work:

.anvil-component.radio {
    display: flex; /* optional - affects the alignment of the radio btn */
}
.anvil-component.radio label {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.anvil-component.radio input[type="radio"] {
    position: relative;
}

This assumes you want this bevaiour for all radio buttons
You could add a role and prefix the above css with .anvil-role-myrole

4 Likes
#5

Thank you @stucork
Your solution is much more elegant than my current attempt!

2 Likes