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

[MeaganV]

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?

[Darshil_Shah1]

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]

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]

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]

@MeaganV please return to your thread and check responses.

[MeaganV]

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

[SanfordWhiteman · Accepted solution]

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]

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.