Form 2.0 - Country Field - using the select option does not show selection on landing page - just white space | Community
Skip to main content
M
MeaganV
New Participant
August 3, 2023
Solved

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

  • August 3, 2023
  • 4 replies
  • 2329 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

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!)

4 replies

SanfordWhiteman
SanfordWhiteman
New Participant
August 3, 2023

@meaganv please return to your thread and check responses.

M
MeaganVAuthor
New Participant
August 14, 2023

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

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
August 14, 2023

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!)

    Sahil_Kumar_Chh
    Sahil_Kumar_Chh
    New Participant
    August 3, 2023

    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
    SanfordWhiteman
    New Participant
    August 3, 2023

    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.

      Darshil_Shah1
      Darshil_Shah1
      Community Manager
      August 3, 2023

      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?

      Terms & ConditionsAccessibility statement

      Loading footer...