Re: Field is Wrapping Below Label on Form - How to Avoid?

Leanne_Persang
Level 4

Field is Wrapping Below Label on Form - How to Avoid?

The following Marketo form is in a lightbox on our website. It uses the Simple template with custom CSS. The Country's Selector and Opt_in's Checkboxes fields are wrapping to the next line - any idea why this is happening and how to avoid this from happening? I'd like them on the same line. See the custom CSS below as well.

pastedImage_1.png

Here is this code:

/* Add your custom CSS below */

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

  width:200px;

}

.mktoGutter {

  display: none;

}

.mktoAsterix {

  margin-right: 0

}

.mktoForm select.mktoField {

    width:100px !important;

}

.mktoForm textarea.mktoField {

    width:300px !important;

}

/* css to customize the field width */

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date] {

  width:200px !important;

  margin-left: 10px;

}

.mktoFormCol, .mktoFieldWrap {

    width:520px !important;

}

/* css to customize the vertical spacing */

.mktoForm .mktoOffset {

    float: left;

    height: 1.2em;

    width:10px;

}

Thanks for your help!

Tags (2)
3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Field is Wrapping Below Label on Form - How to Avoid?

What's the URL on your site?

Leanne_Persang
Level 4

Re: Field is Wrapping Below Label on Form - How to Avoid?

Hi Sanford, the form is on all product pages, here is one example:

Latchways Mini Self-Retracting Lifeline | MSA - The Safety Company | United States

It's the form behind the "Request Information" button.

SanfordWhiteman
Level 10 - Community Moderator

Re: Field is Wrapping Below Label on Form - How to Avoid?

Look in your commerce.css file. You have overly generic selectors in there, like FORM SELECT { clear: both; }, that are overriding the default styles in certain places (they are not overriding mktoForm styles per se, they are overriding browser default styles and that affects all forms).