Search code examples
csstwitter-bootstrapresponsive-designlesstwitter-bootstrap-2

Bootstrap2 input-small does not work on handphone

I have this code and I'm using input-small to make my textbox width shorter. It works on desktop and tablet but not on mobile.

<div class="input-append date">
    <input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
 </div>

On Desktop & tablet

enter image description here

Didn't worked on handphone though:

enter image description here

Any idea on how I can solve this? Thanks in advance.

Solution

  • In your bootstrap-responsive.css, there is more specific css over riding that:

      .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block;
    width: auto;
  }

    To change all .input-append to use that .input-small width, do this after all other css:

    @media (max-width:767px) {

   .input-append .input-small {width:90px;}

}

    OR be more specific if you only want to deal with that .input-append. 

    @media (max-width:767px) {

   .small-input-append.input-append .input-small {width:90px;}

}

    Change your html to: 

    <div class="small-input-append input-append date">
    <input id="month" type="text" placeholder="Select Month" class="input-small"><span class="add-on"><i class="icon-th"></i></span>
 </div>