CODEWITHSUNDEEP
twitter-bootstrap
pixelite
pixelite

Reputation: 57

Bootstrap 3 form not working on mobile devices

I have created this website using your theme; however the form is not working on the mobile devices http://www.qli.co.in/?page_id=297 only the first field works and rest do not work per div.

Here is my code: 

              <h2 class="page-header"><span>Contact Details</span></h2>
                    <span class="col-md-3 col-sm-6">
                        <input id="cmob" name="cmob" class="col-md-12" type="text" placeholder="Mobile Number" title="Please enter a valid mobile number" pattern="\d{10}" required />
                    </span>
                    <span class="col-md-3 col-sm-6">
                        <input id="landnum" name="landnum" class="col-md-12" type="text" placeholder="Landline Number" />
                    </span>
                    <span class="col-md-3 col-sm-6">
                        <input id="cemail" name="cemail" class="col-md-12" type="email" placeholder="Email Address" title="Please enter a valid email id" required />
                    </span>
                    <span class="col-md-3 col-sm-6">
                        <textarea id="address" name="address" class="col-md-12" rows="1" placeholder="Address" required></textarea>
                    </span>

EDIT:

The form tag has been included. When we focus on the input box in mobile browser the input keyboard does not appear automatically

Upvotes: 1

Views: 4947

Answers (2)

Mark Bell
Mark Bell

Reputation: 91

It's a bit of a late response, but worth mentioning. I had this error a while back and although a little CSS trickery will do the job, I found the best solution is prevention - by structuring your page as the Twitter developers intended.

This issue happens when you fail to make good use of the row class. You must lay your page out a row at a time.

<div class="row">        
    <div class="container">           
        // Here you can start building your columns
    </div><!-- End Container -->
</div><!-- End Row -->

// now we start a new row

<div class="row">        
    <div class="container">           
        // Here you can start building the columns for the second row
    </div><!-- End Container -->
</div><!-- End Row -->

If you fail to structure your page in this way, bugs can appear in your code. One of the said bugs is where the inputs are overlayed by other elements, as the OP experienced here, thus preventing them from interacting with smaller devices.

I hope this helps someone in the future

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You have some issues on your floating elements, their parents aren't wrapping them.

You can see on the image that the next element is covering the input fields.

enter image description here

To fix this you need to do this on your css.

.form-inline span {
  display:block;
}

.form-inline span:after {
  content: "";
  clear: both;
  display: block;
}

.form-inline .col-lg-12 {
  clear:both;
}

Upvotes: 2

Related Questions