Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select breaks on nav collapse #6

Closed
ckapatch opened this issue Oct 18, 2012 · 2 comments
Closed

Select breaks on nav collapse #6

ckapatch opened this issue Oct 18, 2012 · 2 comments

Comments

@ckapatch
Copy link
Contributor

Hello again,

I've been working with this control a little and have found that if you put the select in a collapsible nav and you lower the screen resolution to such a width that the nav collapses, the functionality breaks. I'm looking into this myself but thought I'd give you a heads up.

Here's the code to reproduce issue:

<div class="container-fluid">

    <div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a>
            <a class="brand" href="#" id="calendarTitle">Title</a>
            <div class="nav-collapse">
                <ul class="nav">     
                    <li class="dropdown">   
                        <a href="#" class="dropdown-toggle" id="legendTrigger">
                            Legend
                            <b class="caret"></b>
                        </a>                    
                    </li>
                    <li class="divider-vertical" ></li>
                    <li class="navbar-search">
                        Status:
                        <select id="testSelect">
                            <option value="1">Test #1</option>
                            <option value="2">Test #2</option>
                            <option value="3">Test #3</option>
                            <option value="4">Test #4</option>
                            <option value="5">Test #5</option>
                            <option value="6">Test #6</option>
                            <option value="7">Test #7</option>
                            <option value="8">Test #8</option>
                        </select>
                    <li />
                </ul>  
                <ul class="pull-right nav">
                    <li><button id="movePrev" class="btn"><i class="icon-arrow-left"></i></button></li>
                    <li><button id="moveNext" class="btn"><i class="icon-arrow-right"></i></button></li>
                </ul> 
            </div>                              
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#testSelect').selectpicker();
</script>
@silviomoreto
Copy link
Collaborator

Hi ckapatch,

Its because the created div .bootstrap-select have a float: left.
I suggest you to add a span with a float: left in the Status or set the bootstrap-select in another <li>

@ckapatch
Copy link
Contributor Author

Thanks Silvio, I got it work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants