Twitter Bootstrap inline input with dropdown

Question

I m trying to display a text input inline with a dropdown button   I can t figure out how to do this though   Here s the HTML I ve tried  I ve put all of it on a single line with no results     lt div class  input-append  gt     lt input type  text  placeholder  foo  class  input-mini  gt     lt div class  btn-group  gt       lt a id  amount type  class  btn dropdown-toggle  data-toggle  dropdown  href     gt 10 lt span class  caret  gt  lt  span gt  lt  a gt       lt ul id  amount type options  class  dropdown-menu  gt         lt li class  selected  gt  lt a href     gt 10 lt  a gt  lt  li gt         lt li gt  lt a href     gt 100 lt  a gt  lt  li gt         lt li gt  lt a href     gt 1000 lt  a gt  lt  li gt       lt  ul gt     lt  div gt   lt  div gt    Is this possible   Thank you

User · Answer

As of Bootstrap 3 x  there s an example of this in the docs here  http   getbootstrap com components  input-groups-buttons-dropdowns   lt div class  input-group  gt     lt input type  text  class  form-control  aria-label       gt     lt div class  input-group-btn  gt       lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  aria-expanded  false  gt Action  lt span class  caret  gt  lt  span gt  lt  button gt       lt ul class  dropdown-menu dropdown-menu-right  role  menu  gt         lt li gt  lt a href     gt Action lt  a gt  lt  li gt         lt li gt  lt a href     gt Another action lt  a gt  lt  li gt         lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt         lt li class  divider  gt  lt  li gt         lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt       lt  ul gt     lt  div gt  lt  --  btn-group -- gt   lt  div gt  lt  --  input-group -- gt

User · Answer

This is the code for Bootstrap with input search dropdown  I search a lot then i try its in javascript and html with bootstrap   HTML Code     lt div class  form-group  gt       lt label class  col-xs-3 control-label  gt Language lt  label gt       lt div class  col-xs-7  gt           lt div class  dropdown  gt             lt button id  mydef  class  btn dropdown-toggle  type  button  data-toggle  dropdown  onclick  doOn this    gt               lt div class  col-xs-10  gt                   lt input type  text  id  search  placeholder  search  onkeyup  doOn this    gt  lt  input gt               lt  div gt               lt span class  glyphicon glyphicon-search  gt  lt  span gt            lt  button gt         lt ul id  def  class  dropdown-menu  style  display none    gt               lt li gt  lt a id  HTML  onclick  mydef this     gt HTML lt  a gt  lt  li gt               lt li gt  lt a id  CSS  onclick  mydef this     gt CSS lt  a gt  lt  li gt               lt li gt  lt a id  JavaScript  onclick  mydef this     gt JavaScript lt  a gt  lt  li gt         lt  ul gt         lt ul id  def1  class  dropdown-menu  style  display none  gt  lt  ul gt       lt  div gt   lt  div gt         Javascript Code     function doOn obj                  if obj id   mydef                         document getElementById  def1   style display  none               document getElementById  def   style display  block                     if obj id   search                         document getElementById  def   style display  none                document getElementById  def1   innerHTML   lt li gt  lt a id  Java  onclick  mydef this     gt java lt  a gt  lt  li gt  lt li gt  lt a id  oracle  onclick  mydef this     gt Oracle lt  a gt  lt  li gt                 document getElementById  def1   style display  block                        function mydef obj                document getElementById  search   value obj innerHTML          document getElementById  def1   style display  none           document getElementById  def   style display  none           You can use jquery and json code also as per your requirement   Output like

User · Answer

Search for the  quot datalist quot  tag   lt input list  quot texto pronto quot  name  quot input normal quot  gt   lt datalist id  quot texto pronto quot  gt       lt option value  quot texto A quot  gt       lt option value  quot texto B quot  gt   lt  datalist gt

User · Answer

Current state  default implementation in docs  Currently there is a default implementation of input dropdown combo in the documentation here  search for  Button dropdowns    I leave the original solution for the record and for those who cannot use solution now included in the documentation   Original solution  Yes  it is possible  As a matter of fact  there is one example in the Twitter Bootstrap documentation  follow the link and search  Examples  for dropdown buttons     lt div class  btn-group  gt       lt a class  btn btn-primary  href     gt           lt i class  icon-user icon-white  gt  lt  i gt  User      lt  a gt       lt a class  btn btn-primary dropdown-toggle  data-toggle  dropdown  href     gt           lt span class  caret  gt  lt  span gt       lt  a gt       lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt  lt i class  icon-pencil  gt  lt  i gt  Edit lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-trash  gt  lt  i gt  Delete lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-ban-circle  gt  lt  i gt  Ban lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt  lt i class  i  gt  lt  i gt  Make admin lt  a gt  lt  li gt       lt  ul gt   lt  div gt    If enclosed within text  it can look like this  with text on the button changed  nothing else      EDIT   If you are trying to achieve  lt input gt  with appended dropdown menu as in the dropdown buttons  then this is one of the solutions    Add a btn-group class to the element that has input-append class  Add elements with classes dropdown-toggle and dropdown-menu at the end of the element with class input-append  Override style for element matching  input-append  btn dropdown-menu so it does not have float  left  otherwise it will get into next line     The resulting code may look like this    lt div class  input-append btn-group  gt       lt input class  span2  id  appendedInputButton  size  16  type  text  gt       lt a class  btn btn-primary dropdown-toggle  data-toggle  dropdown  href     gt           lt span class  caret  gt  lt  span gt       lt  a gt       lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt  lt i class  icon-pencil  gt  lt  i gt  Edit lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-trash  gt  lt  i gt  Delete lt  a gt  lt  li gt           lt li gt  lt a href     gt  lt i class  icon-ban-circle  gt  lt  i gt  Ban lt  a gt  lt  li gt           lt li class  divider  gt  lt  li gt           lt li gt  lt a href     gt  lt i class  i  gt  lt  i gt  Make admin lt  a gt  lt  li gt       lt  ul gt   lt  div gt    with a little support from this style override    input-append  btn dropdown-toggle       float  none      and give you the exact same result as this     EDIT 2  Updated the CSS selector  was  dropdown-menu  is  dropdown-toggle

User · Answer

Daniel Farrell s Bootstrap Combobox does the job perfectly  Here s an example from his GitHub repository    x000D   x000D    document  ready function    x000D        combobox   combobox    x000D     x000D       bonus  add a placeholder x000D        combobox   attr  placeholder    For example  start typing  Pennsylvania     x000D      x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 7 css bootstrap min css  gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs bootstrap-combobox 1 1 8 css bootstrap-combobox min css  gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 2 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs bootstrap-combobox 1 1 8 js bootstrap-combobox min js  gt  lt  script gt  x000D   x000D   lt select class  combobox form-control  gt  x000D     lt option gt  lt  option gt  x000D     lt option value  PA  gt Pennsylvania lt  option gt  x000D     lt option value  CT  gt Connecticut lt  option gt  x000D     lt option value  NY  gt New York lt  option gt  x000D     lt option value  MD  gt Maryland lt  option gt  x000D     lt option value  VA  gt Virginia lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    As an added bonus  I ve included a placeholder in script since applying it to the markup does not hold

User · Answer

This is my solution is use  display  inline  Some text  lt div class  dropdown  style  display inline  gt     lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-haspopup  true  aria-expanded  true  gt      Dropdown      lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt       lt li gt  lt a href     gt Action lt  a gt  lt  li gt       lt li gt  lt a href     gt Another action lt  a gt  lt  li gt       lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt       lt li gt  lt a href     gt Separated link lt  a gt  lt  li gt     lt  ul gt   lt  div gt  is here   a   x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  rel  stylesheet    gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet    gt Your text x000D   lt div class  dropdown  style  display  inline  gt  x000D     lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-haspopup  true  aria-expanded  true  gt  x000D      Dropdown x000D       lt span class  caret  gt  lt  span gt  x000D     lt  button gt  x000D     lt ul class  dropdown-menu  aria-labelledby  dropdownMenu1  gt  x000D       lt li gt  lt a href     gt Action lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Another action lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Something else here lt  a gt  x000D       lt  li gt  x000D       lt li gt  lt a href     gt Separated link lt  a gt  x000D       lt  li gt  x000D     lt  ul gt  x000D   lt  div gt is here x000D   x000D   x000D

[html] Twitter Bootstrap inline input with dropdown

Examples related to html

Examples related to twitter-bootstrap

Examples related to textinput