Skip to content

Select breaks on nav collapse #6

Closed
@ckapatch

Description

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>

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions