[Forminator Pro] How to align checkboxes and radios horizontally

Hi,

How to align checkboxes horizontally?

How to align radios horizontally?

  • Adam Czajczyk
    • Support Gorilla

    Hello kamhangmak

    I hope you're well today and thank you for your question!

    This can be done with a small addition of a custom css. To achieve this, please follow these steps (example below for radios):

    1. once you got your radio field added to the form, edit that field and go to the "Styling" tab there

    2. in the "Additional CSS Classes" option add some custom class name; for example I added a class "my-radio-buttons" (notice no . dot at the beginning)

    3. "Apply" change, "Update" form and go to the "Appearance" section of form editor

    4. Scroll the page down and enable the "Custom CSS" option there

    5. Put the following CSS into it and update the form

    .my-radio-buttons .forminator-radio {
    float:left;
    padding-right:20px;
    }

    You can adjust the right padding value to suit your needs.

    On the screenshot above you can also see that there's a code for checkboxes. It's pretty much the same (and the custom class would be added to the field the same way), just using different CSS selectors:

    .my-radio-buttons .forminator-radio {

    float:left;

    padding-right:20px;

    }

    .my-check-boxes .forminator-checkbox {
    float:left;
    padding-right:20px;
    }

    And this is the result:

    I hope that helps :slight_smile:

    Best regards,

    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hi kamhangmak

    Yeah, you’re right, I missed the “mobile” views, I’m sorry about that.

    Try adding this CSS also to the form’s custom CSS (below the code that you already added):

    @media only screen and (max-width:782px) {
    .forminator-row {
    clear:both;
    padding-top:5px;
    }
    }

    I just tested it on my end and it seems to do the trick.

    Best regards,

    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.