Opt-in checkbox label does not align correctly

  • Resolved ypp

    (@ypp)


    6 years, 9 months ago

    Greetings,

    I recently upgraded my forms to Ninja Forms 3. After I did, the MailChimp opt-in checkbox does not align correctly:

    checkbox misaligned - safari

    In the above, the Test Ninja Forms Checkbox field is a normal Ninja Forms field, and it shows correctly. I therefore concluded that the problem lies with the MCFW plugin.

    If I align the label above or below the checkbox, it appears normally in Safari. However, even with that alignment it does not appear correctly in Chrome:

    mailchimp opt-in checkbox in Chrome

    Any help on this will be much appreciated. Thanks!

    Steve

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Lap

    (@lapzor)

    6 years, 9 months ago

    Hi Steve,

    A link to your website would help us to look into this.

    The screenshots are not loading.

    Thanks,

    Thread Starter ypp

    (@ypp)

    6 years, 9 months ago

    Hi Lap,

    Thanks for your reply. I saw that the screenshots weren’t loading but couldn’t figure out why.

    Sample form is at http://pendarpagi.org/en/partner/

    For you to view this I have intentionally set the opt-in label position to ‘right of element.’ In my browser (Safari) the label text appears in two lines, on the opposite side of the form.

    When I tested a normal Ninja Forms checkbox the label appears in the correct position.

    Thanks!

    Plugin Contributor Lap

    (@lapzor)

    6 years, 9 months ago

    Seems your themes CSS is causing this.

    This would overwrite it:

    .mc4wp_optin-container .nf-field-element { width: 30px !important; }
    .mc4wp_optin-container .nf-field-label { width: 70% !important; }

    You can add this to your child themes style.css or via a plugin like “Simple Custom CSS”

    Hope that helps,

    Thread Starter ypp

    (@ypp)

    6 years, 9 months ago

    Hi Lap,

    I added that code to my child styles.css but no change in the way the label displays.

    Plugin Contributor Harish Chouhan

    (@hchouhan)

    6 years, 9 months ago

    Hello,

    In Chrome I see the label aligned on the right of the checkbox and the code Lap shared being applied to the field.

    Please see the screenshot at https://www.dropbox.com/s/9aayzawbx1l2x4m/Screenshot%202017-07-14%2003.14.51.png?dl=0.

    Thread Starter ypp

    (@ypp)

    6 years, 9 months ago

    Great, thank you very much!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Opt-in checkbox label does not align correctly’ is closed to new replies.