Last Updated
Viewed 41 Times

I'm using bootstrap's drop-down menu for an text input element.

It's working fine until I try to use it in an input-group. Then the offset gets messed up and the menu is displayed over the text input.

Anyone has an idea on how to fix this?

Wrong an correct

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">Wrong:</label>
            <div class="col-sm-9">
                <div class="input-group">
                    <div class="dropdown open">
                        <input type="text" class="form-control">
                        <ul class="dropdown-menu">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                        </ul>
                    </div>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default">Load</button>
                        <button type="button" class="btn btn-default">Save</button>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">...</label>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Correct:</label>
            <div class="col-sm-9">
                    <div class="dropdown open">
                        <input type="text" class="form-control">
                        <ul class="dropdown-menu">
                            <li>One</li>
                            <li>Two</li>
                            <li>Three</li>
                        </ul>
                    </div>
            </div>
        </div>
    </form>
</div>

Trying to align badges to the right of each drop-down menu. Currently, the badges look like so:

badges, no pull-right

with the associated code:

            <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown ">
                    <a data-target="/business" href="/business" class="dropdown-toggle" data-toggle="dropdown">Business<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                        <li >
                            <a href="/economy">Economy <span class='badge' today: 2</span></a>
                        </li>
                        <li >
                            <a href="/financials">Financial Reports <span class='badge' today: 78</span></a>
                        </li>
                        <li >
                            <a href="/interest">Interest Rates </a>
                        </li>

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

adding 'pull-right' to the badge class () causes the badges to collapse:

badges with pull-right

Also, using boostrap3, with the bootswatch cosmo template (in case that's relevant). Any ideas here?

I am trying to make the drop-down go to the extreme right, after the search input and submit button, tried pull-right, navbar-right but to no avail.

Is there a way to achieve this?

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav pull-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Google</a></li>              
        </ul>
      </li>
    </ul>

  </div><!--/.nav-collapse -->
</div>

enter image description here

I'm trying this: enter image description here

I have this mega-menu created with bootstrap-3

<nav class="yamm navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand navbar-brand-centered">
                <a href="#">Logo</a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar-brand-centered">
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown yamm-fw">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Some Procedure</a>
                <ul class="dropdown-menu">
                        <li>
                    <div class="yamm-content">
                                <div class="row">
                            <div class="col-xs-12 col-md-9 col-sm-6 bg1 nopadding">
                                <div class="megamenu">
                                    <h4>Some Text Some Text Some Text </h4>
                                    <hr />
                                    <ul>
                                        <li><span>Some Text Some Text Some Text Some Text Some Text </span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
                </li>
                <li class="dropdown yamm-fw">
                    <ul class="dropdown-menu">
                            <li>
                        <div class="yamm-content">
                                <div class="row"></div>
                        </div>
                    </li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown yamm-fw">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle" tabindex="0">Search Here</a>
                <ul class="dropdown-menu">
                <li>
                    <div class="yamm-content">
                        <div class="row">
                        <div class="col-xs-12 col-md-12 col-sm-12 bg1 searchbg">
                            <div class="megamenu">
                                <form role="form">
                                  <div class="form-group">
                                    <label for="email">Pick A Date</label>
                                    <input type="datepicker" class="form-control" id="datepicker">
                                  </div>
                                  <button type="submit" class="btn btn-default">Submit</button>
                                </form>
                            </div>
                        </div>
                        </div>
                    </div>
                </li>
                </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

The last menu drop-down has form and I'm trying it to stay visible on page load and it does stay visible using style="display: block !important" but as soon as cursor move away from drop-down it close it-self.

Drop-down menu visible on mouse hover

$('.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(300);
    }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(300);
});

2nd problem I'm facing is form has datepicker input and when click on input to select date, calendar shows but drop-down with form behind calendar close itself.

What I've tried possible solutions and answers here and here and here but nothing works or may be I'm doing it all wrong.

Fiddle

Similar Question 4 (1 solutions) : Bootstrap drop down feature is not working

Similar Question 5 (1 solutions) : Bootstrap drop down not working as expected

Similar Question 6 (1 solutions) : Why is my drop-down navbar not getting displayed

Similar Question 8 (2 solutions) : Change the Size of a Bootstrap Drop Down Menu

Similar Question 9 (1 solutions) : Bootstrap drop down list goes under the nav bar

cc