CF7 – Mobile formatting of dates and placeholders

  • Hi there,

    I have on issue, that is only apparent when viewing from a mobile in Safari or Chrome. (Viewing on desktop and resizing does not replicate the issue)

    Here’s a screenshot to better showcase: https://capture.dropbox.com/oPQUJFErJ5F1y28B

    Issue #1:

    I can’t format the first two blank datepickers to be the same width as the other fields. I tried adding a class to their label, and setting their width to 96%, but adding classes to labels is something that does not work, also, this is sort of a hacky solution.

    Issue #2:

    On desktop, the placeholders for the datepicker fields, grouptype, and apartment type fields appear inside the fields, here, they overlap. Is there any way to fix these?

    This would be the desired outcome, which we get when viewing from a desktop browser and resizing:

    https://capture.dropbox.com/yM6jBMHe7Q3Gt9h2

    Thank you very much for your help.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Pbalazs89

    (@pbalazs89)

    Here’s the code for the form itself as well: 

    <div class="form-row">
  <div class="form-col">
<label>
     
      [text* full-name placeholder "Teljes név"]
    </label>
    
<label>
   
      [text* your-nationality placeholder "Nemzetiség"]
    </label>

<label>
   
      [date arrival placeholder "éRKEZéS: &nbsp;" ]
    </label>

<label>
 
      [text Voucher placeholder "Voucher"]
    </label>

<label>
 
  [select GroupType first_as_label " CSOPORTTíPUS" "Egyetemi út" "Iskolás csoport" "Sport út" "Leánybúcsús és legénybúcsús csoportokat nem fogadunk" "Egyéb" ]
</label>



    
</div>
  <div class="form-col">

<label>
    
      [email* email-252 placeholder "Email cím"]
    </label>
<label>
  
      [tel* your-phone placeholder "Telefonszám"]
    </label>
    
<label>
     
      [date departure placeholder "TáVOZáS: &nbsp;"]
    </label>
    
<label>
     
      [number number-696 placeholder "RéSZTVEV?K SZáMA"]
    </label>
    
<label>
    
      [select Apartmenttype first_as_label "APARTMANTíPUS" "Deluxe Studio" "Deluxe 1 ágyas" "Deluxe 2 ágyas" "Superior Penthouse"]
    </label>
  </div>
</div>
<div class="form-row">
  <label>
   
    [textarea your-message 200x4 placeholder "AZ ?N üZENETE (OPCIONáLIS)"]
  </label>
</div>
<div class="form-row">
  [submit "üzenet küldése"]
</div>
    • This reply was modified 1 year, 3 months ago by Pbalazs89.
    Thread Starter Pbalazs89

    (@pbalazs89)

    The issue is mostly fixed on mobile Chrome, but is unfortunately still apparent in the case of Safari.

    • This reply was modified 1 year, 3 months ago by Pbalazs89.
    Thread Starter Pbalazs89

    (@pbalazs89)

    Anyone?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CF7 – Mobile formatting of dates and placeholders’ is closed to new replies.