Twitter Bootstrap Question posted in

Not able to change size of input box in bootstrap, it is default set to input-sm – Twitter bootstrap

I wanted to put datetime picker, I am able to do it but my input box in smaller even if I put ‘form-control input-lg’. Please suggest how can I change its size.

Also I wanted to overlap this datetime picker icon on text box.

Below is my code: 

$('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>

<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1" class="input-append">
    <span class="add-on"> <i data-time-icon="icon-time"
    			data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>

</body>
Tags:

2

Answers


  1. 0

    You have div class overriding bootstrap

    id=”dateOfAlert1″ class=”input-append

    remove the input-append or edit the input in that class. 

    $('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>

<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1">
    <span class="add-on"> <i data-time-icon="icon-time"
    			data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>

</body>
    Login or Signup to reply.
  2. 0 
    $('#dateOfAlert1').datetimepicker({
  format: 'dd/MM/yyyy hh:mm:ss',
  language: 'en-US'
});
    .add-on{
position:relative;
 
}
.add-on .date-icon{
position:absolute;
  top:0px;
  left:0px;
}
.add-on{
width:50px!important;
}
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>

<body>
  <label class="control-label" for="dateOfAlert">Date <span class="asteriskField"> * </span>
  </label>
  <div id="dateOfAlert1" class="input-append">
    <span class="add-on"> <i data-time-icon="icon-time" class="date-icon" data-date-icon="icon-calendar"></i>
    		</span> 
    <input type="text" id="dateOfAlert" name="dateOfAlert" class="form-control input-lg" />
  </div>

</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search