changing the preview of dropdown box of bootstrap css

Question

Here is my jsfiddle for bootstrap css dropdown menu

Currently when I click on the arrow button on right side, it opens the menu items.

What I want to removing the button and items should appear when user click on the Edit box(select category ..).

The menu should cover entire width of the edit box.

 <div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Select category ...">
              <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a href="#">Sports</a></li>
              <li><a href="#">Entertainment</a></li>
              <li><a href="#">Politics</a></li>
              <li class="divider">Technolohy</li>
              <li><a href="#"></a></li>
            </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->

When user take cursor on Textbox it should show menu items covering entire width of the textbox

UpdATE

Output

@NoobEditor: I already gave fiddle. Please see first link in the question — user3121782, Jan 03 '14 at 10:55
you want `drop-down` menu to be `full-width` or m i mis-reading??? — NoobEditor, Jan 03 '14 at 10:58
@NoobEditor: yes right. similar to Google search box. It shows searched item with full with of edit box — user3121782, Jan 03 '14 at 11:06
May be you are looking for [this](http://jsfiddle.net/KrtB5/27/). Found from [this post](http://stackoverflow.com/a/18064407/890082) — Surjith S M, Jan 03 '14 at 11:13

NoobEditor · Accepted Answer · 2014-01-03T13:46:58.150

1

just add this in your CSS and you are good to go with full-width-dropdown-menu.... :)

.dropdown-menu {
  width: 100%; 
}

demo here

EDIT

Please check the files included in jsfiddle....there is a typehead.js which you would be needing for sure!!

demo after which i am your new best friend :)

JS which you need

$('.typehead').typeahead({
    name: 'Some name',
    local: ['Sports', 'Entertainment', 'Politics', 'Technolohy', 'Technolohy Again']
})
$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

HTML

<div class="container">
    <div class="col-lg-6">
        <div class="input-group">
            <input type="text" class="typehead form-control" placeholder="Select category ..." />
        </div>
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
    <!-- /.row -->

edited Jan 03 '14 at 13:46

answered Jan 03 '14 at 11:15

NoobEditor

15,563
19
81
112

Thanks buddy, little issue. It show menu item when clicked on arrow on right end. Rather I want menu item to be displayed when user click on `selecte category ` entire edit(text) box. http://jsfiddle.net/karimkhan/CZe77/1/ – user3121782 Jan 03 '14 at 11:22
@NoodEditor: thanks but little different. I am trying it but on way. Please see snapshot in my udpated question desc – user3121782 Jan 03 '14 at 12:34
thanks a ton. But still some issue :(. When user take cursor on textbox(on focus in textbox), all menu items(categories) should be popped automatically. Also want to perform action on item select – user3121782 Jan 03 '14 at 13:30
in my case i was using `$(".dropdown-menu li a").click(function () {` to perform menu item selection action. What it should be here? – user3121782 Jan 03 '14 at 13:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44423/discussion-between-user3121782-and-noobeditor) – user3121782 Jan 03 '14 at 13:56
http://jsfiddle.net/TX8C6/9/ its not very refined,u'll need to do it from ur end....had u been responding..i myt have been able to help more :p – NoobEditor Jan 03 '14 at 15:12

score 1 · Answer 2 · answered Jan 03 '14 at 11:35

1

With some jQuery:

jQuery

$(".btn-default").click(function () {
    var widthB = $( ".input-group" ).width();
    $('.dropdown-menu').css('width', widthB);
});

The Fiddle

answered Jan 03 '14 at 11:35

Goombah

2,835
2
12
22

thanks dude, but menu item should be popped when user click on textbox. That is what I want. – user3121782 Jan 03 '14 at 12:37

changing the preview of dropdown box of bootstrap css

2 Answers2