I’m using this CSS code (from the Knack CSS Examples list) to make a radio button field horizontal.
However I have many fields on the one form that I want horizontal.
How do I make the one CSS snippet refer to multiple fields, without having to duplicate it multiple times?
Hi @Craig_Anderson, using the example from the Knack documentation, you can add on as many additional fields in a comma-separated way like so:
#kn-input-field_1 .kn-radio,
#kn-input-field_2 .kn-radio,
#kn-input-field_3 .kn-radio {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
#kn-input-field_1 .kn-radio .control,
#kn-input-field_2 .kn-radio .control,
#kn-input-field_3 .kn-radio .control {
margin-right: .5em;
}
This will apply the same styling to all three fields.
Otherwise if you want to apply it globally to all kn-radio
controls, you can use this:
.kn-radio {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
}
.kn-radio .control {
margin-right: .5em !important;
}
If you also want to include checkboxes, you can add them too:
.kn-radio,
.kn-checkbox {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
}
.kn-radio .control,
.kn-checkbox .control {
margin-right: .5em !important;
}
Ahh so easy, thanks so much for the quick reply Stephen!
1 Like