SOLVED

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

Go to solution
MeaganV
Level 1

Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

Hi, I created a form with the Country field and used the Select option and populated the values -- I am able to select a country in the preview mode, but when the form is added to a landing page - the country I select does not show in the field box.  Is there a solution?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

It’s simple, you’re adding that whitespace by adding padding to the select.

 

This CSS is on your LP:

      .mktoForm input[type="text"],
      .mktoForm input[type="url"],
      .mktoForm input[type="email"],
      .mktoForm input[type="tel"],
      .mktoForm input[type="number"],
      .mktoForm input[type="date"],
      .mktoForm textarea.mktoField,
      .mktoForm select.mktoField,
      .mktoForm input[type=text],
      .mktoForm input[type=url],
      .mktoForm input[type=email],
      .mktoForm input[type=tel],
      .mktoForm input[type=number],
      .mktoForm input[type=date],
      .mktoForm select.mktoField,
      .mktoForm textarea.mktoField {
        /* other styles... */
        padding: 1.5rem 1rem !important;
        /* other styles... */
      }

 

This padding moves the selected option out of the visible area.

 

If you’re trying to add whitespace to a select you want to use height, not padding.  Form elements aren’t sized like other elements. 

 

(P.S. In the future, please try to be more attentive to threads you open here. You had near-real-time responses from 3 different users, yet we didn’t see you again for 2 weeks!)

View solution in original post

7 REPLIES 7
Darshil_Shah1
Level 10 - Community Advisor + Adobe Champion

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

Hmm..interesting! Do you have any custom JS added to the page that might be hiding values upon select? Are you able to share the page so we can see the issue in action?

SanfordWhiteman
Level 10 - Community Moderator

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

Like Darshil says, you have to link to the page.

 

Based on your description you may be trying to pre-set the Select to a value that doesn't actually exist as an Option.

Sahil_Kumar_Chh
Level 2

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

It's possible that there's a CSS problem where the field and select options are both white. Please provide the landing page URL as previously mentioned. This seems like a minor issue that can be identified from the landing page URL.

SanfordWhiteman
Level 10 - Community Moderator

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

@MeaganV please return to your thread and check responses.

MeaganV
Level 1

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

Hi,  here is the link Page Title (cihi.ca) I am testing out.

SanfordWhiteman
Level 10 - Community Moderator

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

It’s simple, you’re adding that whitespace by adding padding to the select.

 

This CSS is on your LP:

      .mktoForm input[type="text"],
      .mktoForm input[type="url"],
      .mktoForm input[type="email"],
      .mktoForm input[type="tel"],
      .mktoForm input[type="number"],
      .mktoForm input[type="date"],
      .mktoForm textarea.mktoField,
      .mktoForm select.mktoField,
      .mktoForm input[type=text],
      .mktoForm input[type=url],
      .mktoForm input[type=email],
      .mktoForm input[type=tel],
      .mktoForm input[type=number],
      .mktoForm input[type=date],
      .mktoForm select.mktoField,
      .mktoForm textarea.mktoField {
        /* other styles... */
        padding: 1.5rem 1rem !important;
        /* other styles... */
      }

 

This padding moves the selected option out of the visible area.

 

If you’re trying to add whitespace to a select you want to use height, not padding.  Form elements aren’t sized like other elements. 

 

(P.S. In the future, please try to be more attentive to threads you open here. You had near-real-time responses from 3 different users, yet we didn’t see you again for 2 weeks!)

MeaganV
Level 1

Re: Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space

Thank you, Sanford, this was my first time posting and didn't realize how fast people respond, good to know. I didn't get any notifications either on my end.