Has anyone had any luck changing the orientation of Knack radio buttons with jquery or css?

API & Customization Ask Developers
1

Has anyone had any luck changing the orientation of Knack radio buttons with jquery or css?

Help a guy out?

2

Our Knack Dev docs include code to change the orientation of radio buttons. You can find it here.

3

Here's my solution.  This saves realeste on a small touch screen and makes it easier to read and select the desired choice by increasing space between options.

 

Add this to your CSS pane:

/*Make all radio buttons horizonal to maximize vertical realestate*/
.kn-radio {
display: flex !important;
}

/*Radio buttons, add some padding to their right to make them easier to read and use on touch screens*/
.option.radio {
padding-right: 35px;
}

 

1 Like
4

Works like a charm. Thanks @Guilhermebastian2

5

Wow. That was fast. Thanks for the tip!  I had not tried Flex.

6

I had. Find the css element and play with display: flex. Try all display properties until you find the one you want. Im on phone right now, so I dont remember the element name and the property I choosed, but it’s a display property.

7

Works like a charm. Thanks Normand!