margin on checkboxs

  • Resolved Marklcm

    (@marklcm)


    6 years, 4 months ago

    I need to add a bottom margin to checkboxes, particularly on small screens, to improve usability when tapping.
    Easy to do, using the right element.

    The only problem is this also pushes the description down away from the label and checkbox. Could it all be wrapped together to so the label, checkbox and description can have bottom margin applied together?

    Also easy enough to fix with a negative margin on the description, but it all gets a bit clunky.
    Thank you for the plugin.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    6 years, 4 months ago

    Hi @marklcm

    I hope you’re well today!

    The checkboxes are actually “wrapped” with “label” tag so entire “content” of the checkbox (checkbox itself and its description) is inside “label” element. Therefore you can apply margins – or it might actually be better in this case to apply padding rather than marking – to entire “label” element like this: 

    label.forminator-checkbox {
   padding-bottom:25px;
}

    Best regards,
    Adam

    Thread Starter Marklcm

    (@marklcm)

    6 years, 4 months ago

    thank you, my bad

    Thread Starter Marklcm

    (@marklcm)

    6 years, 4 months ago

    sorry, I took your answer as correct, however, the span class “forminator-description” is outside the “label” tag, so padding applied to the label tag does push the description down.

    Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    6 years, 4 months ago

    Hi @marklcm

    You’re right, I’m sorry about that, I took a look at wrong check-boxes (without description).

    However, they are wrapped-around anyway. Each field is inside it’s own DIV block with it’s own ID.

    For example, on your site there are three checkboxes for “Do you have slide-outs” question. In fact this is a single field with three options and a description below it. This entire field is wrapped in a

    .#checkbox-4

    div on your site so you can address this specific div with margins/paddings and/or additionally elements (e.g. single checkboxes) inside it if you need to.

    Kind regards,
    Adam

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘margin on checkboxs’ is closed to new replies.