CSS Code to call up multiple fields

Ask the Community Get Answers
1

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?

2

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;
}
3

Ahh so easy, thanks so much for the quick reply Stephen!

1 Like