Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap datepicker expands up but not down

I am using bootstrap. When I click my date picker it expands up and goes under my navigation bar. How do I fix it? - I would like it to be expanded into visible page area.

enter image description here

This is my html/css:

<html ng-app="fly">

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="js/bootstrap-datepicker.js"></script>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="app.js"></script>
    </head>

    <div ng-controller="myController">

        <nav class="navbar navbar-inverse navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand logo" href="#">
                        <span class="glyphicon glyphicon-plane"> </span>
                        <a href="#" class="navbar-text ffly">FLY</a>
                    </a>
                </div>
            </div>
        </nav>


        <div class="container well well-md searchDialog">
            <form role="search">

                <div class="row searchRow">
                    <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-12">
                        <label for="searchBox">From</label>
                        <input type="text" class="form-control" id="searchBox"placeholder="Search">
                    </div>
                </div>

                <div class="row dateRow">
                    <div class='col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-2 col-xs-6'>
                        <div class="form-group">
                            <label for="depart">Depart</label>
                            <div class='input-group date' id='datetimepicker6'>
                                <input type='text' id="depart" class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class='col-md-4 col-md-offset-0 col-sm-4 col-sm-offset-0 col-xs-6'>
                        <div class="form-group">
                            <label for="return">Return</label>
                            <div class='input-group date' id='datetimepicker7'>
                                <input type='text' id="return"class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $('#datetimepicker6').datepicker();
                        $('#datetimepicker7').datepicker();
                        $("#datetimepicker6").on("dp.change", function (e) {
                            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                        });
                        $("#datetimepicker7").on("dp.change", function (e) {
                            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
                        });
                    });
                </script>


            </form>
        </div>
    </div>

    </body>
</html>

</html>

css:

.navbar-brand{
    height: 60px;
}

.logo {
    font-size: 35px;
}
.fridayfly{
    font-size: 25px;
}
a.ffly:link { color: #FFFFFF; text-decoration: none}
a.ffly:visited { text-decoration: none}
a.ffly:hover { color: #FFFFFF; text-decoration: none}
a.ffly:active { color: #FFFFFF; text-decoration: none}


.dateRow{

    margin-top: 20px;

}
like image 249
Wild Goat Avatar asked Jun 17 '15 23:06

Wild Goat


2 Answers

Have you tried to change the orientation property?

$('#datetimepicker6').datepicker({
    orientation: 'bottom'
})

https://bootstrap-datepicker.readthedocs.org/en/latest/options.html#orientation

On the API they bind the datepicker in a input tag instead of a div. Have you tried that?

like image 200
Thiago Avelino Avatar answered Nov 18 '22 04:11

Thiago Avelino


I tried the css rule but that didn't work. Setting the option

zIndexOffset: '1001',

worked. http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#zindexoffset

like image 3
lekant Avatar answered Nov 18 '22 06:11

lekant