Bootstrap: How to correctly make these elements responsive

Question

I've design a screen using Bootstrap.I've added an input with typehead features.But after after adding that, responsiveness[e.g size adjustment on minimize or maximum etc] get inactive.

Here is a sample photo of What i want:

But Now This is what i am getting:

 
         $(document).ready(function(){
          $('input.typeahead').typeahead({
           name: 'accounts',
           local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
           
          });
         });

         .bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 30px;
         line-height: 30px;
         outline: medium none;
         padding: 8px 12px;
         width: 0px;
         }
         .typeahead {
         background-color: #FFFFFF;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 24px;
         line-height: 24px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
      
   
      
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test Responsive</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">Person</label>
                        <div class="col-sm-5" id = "empid" >
                           <div class="input-group ">                      
                              <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>           
                              <input type="text" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" name="textemployeeid"  id="textemployeeid"  placeholder="Enter"> 
                              <span class="input-group-btn">
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true"></i></span>
                              </button>    
                              </span>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Please Help me to solve this.Thanks

score 2 · Accepted Answer · edited May 23 '17 at 11:52

you need to add this class to your css:

Edited: I Added display:block !important; to class

.twitter-typeahead {
                  width: 100%;
                  display:block !important;
         }

by the way its already answered before:

Typeahead problems with Bootstrap 3.0 RC1

hope this helps.

$(document).ready(function(){
          $('input.typeahead').typeahead({
           name: 'accounts',
           local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
           
          });
         });

.bs-example{
         //font-family: sans-serif;
         position: relative;
         margin: 100px;
         }
         .typeahead, .tt-query, .tt-hint {
         border: 2px solid #CCCCCC;
         border-radius: 8px;
         font-size: 12px;
         height: 30px;
         line-height: 30px;
         outline: medium none;
         padding: 8px 12px;
         width: 0px;
         }
         .typeahead {
         background-color: #FFFFFF;
         }
         .typeahead:focus {
         border: 2px solid #0097CF;
         }
         .tt-query {
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
         }
         .tt-hint {
         color: #999999;
         }
         .tt-dropdown-menu {
         background-color: #FFFFFF;
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 8px;
         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
         margin-top: 12px;
         padding: 8px 0;
         //width: 422px;
         }
         .tt-suggestion {
         font-size: 24px;
         line-height: 24px;
         padding: 3px 20px;
         }
         .tt-suggestion.tt-is-under-cursor {
         background-color: #0097CF;
         color: #FFFFFF;
         }
         .tt-suggestion p {
         margin: 0;
         }
        .twitter-typeahead {
                  width: 100%;
                  display:block !important;
         }

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          
      
   
      
   </head>
   <body >
      <div class="container"  >
         <div class="panel-group">
            <div class="panel panel-primary"  >
               <div class="panel-heading" >
                  <h3 class="panel-title" style="text-align: center;">Test Responsive</h3>
               </div>
               <div class="panel-body">
                  <form class="form-horizontal" >
                     <div class="form-group">
                        <label class="control-label col-sm-3"  for="acode">Person</label>
                        <div class="col-sm-5" id = "empid" >
                           <div class="input-group ">                      
                              <span class="input-group-addon"><i class="glyphicon glyphicon-user"  aria-hidden="true"></i></span>           
                              <input type="text" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" name="textemployeeid"  id="textemployeeid"  placeholder="Enter"> 
                              <span class="input-group-btn">
                              <button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
                              <span class="input-group-addon"><i class="glyphicon glyphicon-search "  aria-hidden="true"></i></span>
                              </button>    
                              </span>
                           </div>
                        </div>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Thanks @hsh. Nice solution.But if notice carefully, you'll all elements [e.g: 2 span icon and input element] are not properly aligned as a group .So what need to edit.Thanks again — user5005768Himadree, May 31 '16 at 09:34
Thanks @hsh. Now its working. i have seen that you added this line `display:block !important;`. can you tell how this code line solve the problem.thank you very much.. — user5005768Himadree, May 31 '16 at 10:14
@user5005768, when typehead runs, it changes the markup of employeeId input tag and add this inline style: ` position: relative; display: inline-block; ` so you need to change display to block and force it to override inline-block with !important — hsh, May 31 '16 at 10:25

Bootstrap: How to correctly make these elements responsive

1 Answers1