Bootstrap input form-control not working on mobile device

Viewed 8837

My input in mobile version is not opening the keyboard to type the data. When I click on the input nothing happens (in mobile). This issue only happens in mobile.

<!DOCTYPE html>
    <html lang="en">
     
    <head>
    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="">
        <meta name="author" content="">
     
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
     
    <body>
     <div class="container">
      <div class="row">
       <div class="col-md-4">
        <div class="panel panel-info">
         <div class="panel-heading">
          <h3 class="panel-title" align="center" style="display: inline;font-weight: bold;">Credit Card</h3>
         </div>
         <div class="panel-body">
          <form role="form">
          <div class='form-row'>
           <div class="col-xs-12 form-group">
            <label class='control-label'>Name on Card</label>
            <input class="form-control" id="nameOnCard" type="text" value="">
           </div>
           <div class="col-xs-12 form-group">
            <label class='control-label'>Card Number</label>
            <input class="form-control" id="cardNumber" size="20" type='text' value="">
           </div>
           <div class="col-xs-6 form-group">
            <label class='control-label'>Zip Code</label>
            <input class="form-control" id="zipCode" size="6" type='text' value="">
           </div>
          </div>
          <div class='form-row'>
             <div class='col-xs-4 form-group cvc required'>
            <label class='control-label'>CVC</label>
            <input id="CardCVC" class='form-control' placeholder='ex. 311' size='4' type='text' value="">
             </div>
             <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'>Expiration</label>
            <input class='form-control' id="expMonth" placeholder='MM' size='2' type='text' value="">
             </div>
             <div class='col-xs-4 form-group expiration required'>
            <label class='control-label'> </label>
            <input class='form-control' id="expYear" placeholder='YY' size='2' type='text' value="">
             </div>
          </div>
          <div class='form-row'>
            <div class='col-md-12 form-group'>
           <button class='form-control btn btn-primary' type='button' onClick="updateCreditCard();">Update</button>
            </div>
          </div>
          </form>
         </div>
        </div>
       </div>
      </div>
     </div>
    </body>
    
    </html>

Does anyone know why it is happening? There is no error in the debug console. When I try it using my computer, the code works fine.

Thanks

1 Answers

You dont use the form group in a proper way

i have fixed that

I just changed form-group for each input form from this:

<div class='form-row'>
         <div class="col-xs-12 form-group">
            <label class='control-label'>Name on Card</label>
            <input class="form-control" id="nameOnCard" type="text" value="">
         </div>
         <div class="col-xs-12 form-group">
            <label class='control-label'>Card Number</label>
            <input class="form-control" id="cardNumber" size="20" type='text' value="">
         </div>
         <div class="col-xs-6 form-group">
            <label class='control-label'>Zip Code</label>
            <input class="form-control" id="zipCode" size="6" type='text' value=""> 
        </div>
</div>

to be like this:

<div class="form-group col-md-12">                                
        <label class='control-label'>Name on Card</label>
        <input class="form-control" id="nameOnCard" type="text" value="">          
 </div>
 <div class="form-group col-md-12">                       
        <label class='control-label'>Card Number</label>
        <input class="form-control" id="cardNumber" size="20" type='text' value="">
 </div>
 <div class="form-group col-md-12">                           
        <label class='col-md-12 control-label'>Zip Code</label>
        <input class="form-control" id="zipCode" size="6" type='text' value="">
  </div>

The form-group for each input is correct, but at the top of that, there is form-row which is not necessary to make just like questioner want.

<!DOCTYPE html>
<htm>
        <head>
        
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta name="description" content="">
            <meta name="author" content="">
         
         
         <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        </head>
         
        <body>
         <div class="container">
          <div class="row">
           <div class="col-md-6">
            <div class="panel panel-info">
             <div class="panel-heading">
              <h3 class="panel-title" align="center" style="display: inline;font-weight: bold;">Credit Card</h3>
             </div>
             <div class="panel-body">
              <form >
              
               <div class="form-group col-md-12">
                            
                <label class='control-label'>Name on Card</label>
                <input class="form-control" id="nameOnCard" type="text" value="">
                    
               </div>
               <div class="form-group col-md-12 col-xs-12">
                                 
                <label class='control-label'>Card Number</label>
                <input class="form-control" id="cardNumber" size="20" type='text' value="">
               </div>
               <div class="form-group col-md-6 col-xs-12">
                <label class='control-label'>Zip Code</label>
                <input class="form-control" id="zipCode" size="6" type='text' value="">
                                       
                                    </div>
                                    <div class="form-group col-md-6 col-xs-12">
                                        <label class='control-label'>CVC</label>
                                        <input id="CardCVC" class='form-control' placeholder='ex. 311' size='4' type='text' value="">
                                    </div>
                 <div class='form-group col-md-4 col-xs-12 expiration required'>
                <label class='control-label'>Expiration</label>
                <input class='form-control' id="expMonth" placeholder='MM' size='2' type='text' value="">
                 </div>
                 <div class=' form-group col-md-6 col-xs-12  expiration required'>
                <label class='control-label'> </label>
                <input class='form-control' id="expYear" placeholder='YY' size='2' type='text' value="">
                 </div>
                                    <div class="form-group">
           <button class="btn btn-primary col-md-12 col-xs-12" onClick="updateCreditCard();">Update</button>
                    
                            </div>
              </form>
             </div>
            </div>
           </div>
          </div>
         </div>
        </body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </html>

Look at this website how to use the form group

Related