CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
adit
adit

Reputation: 33674

how to make input-group responsive (search and dropdown)

I have the following fiddle, it works fine for desktops. However I want to make it responsive, such that on mobile devices the main category and second category is below the search input text. How do I do so?

I know I can use media queries to make things responsive, but I am not sure how to make the 'input-group-button' on the new line on screen sizes below 600px. What's the easiest way to do this?

<div class="input-group">
          <input type="text" class="form-control search-query" placeholder="Masukkan produk yang kamu cari disini">
          <div class="input-group-btn" data-toggle="tooltip" data-trigger="manual" data-placement="top" title="Pilih kategori utama pencarian">
            <button type="button" class="btn btn-default dropdown-toggle top-category-label" data-toggle="dropdown"> Main Category <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right top-category">

            </ul>
          </div>
          <div class="input-group-btn" data-toggle="tooltip" data-trigger="manual" data-placement="bottom" title="Pilih kategori kedua pencarian">
            <button type="button" class="btn btn-default dropdown-toggle first-level-label" data-toggle="dropdown"> Second Category <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right first-level-category">

            </ul>
          </div>
        </div>

Upvotes: 7

Views: 14660

Answers (2)

Diana
Diana

Reputation: 1

In addition to the above, you need to overwrite this part of Boostrap css:

.input-group-addon, .input-group-btn {
     width: 1%;
     white-space: nowrap;
     vertical-align: middle;
 }

will become:

 @media (max-width: 480px) {
    .input-group-addon {
       width: 100%;
       box-sizing: content-box;
       white-space: pre-line;
   }
 }

You will also have to add in max-width 100% and box-sizing: content-box to .input-group and add in any kind of padding appropriate for your form.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22653

just use mediaqueries

@media (min-width: 1100px) {
  /*code for destop*/
}
@media (max-width: 1100px) {
/*code for ipad and netbooks*/
 }
@media (max-width: 480px) {
/*code for mobile here*/

}

if you are using BS3 

@media(max-width:767px){

}
@media(min-width:768px){

}
@media(min-width:992px){

}
@media(min-width:1200px){

}

UPDATED Demo in Jsfiddle

in your case it would be something like this:

@media (max-width: 480px) {
  body {
    background: #f95e8a;
  }
.input-group-addon, .input-group-btn, .input-group .form-control {
    display: block;
    margin-bottom: 10px;
    clear: both;
    }
.input-group {
    display: block;
    }
}

Upvotes: 6

Related Questions