Reduce (Decrease) height of Bootstrap DatePicker Widget

Last Reply on Jan 07, 2016 06:20 AM By dharmendr

Posted on Jan 06, 2016 03:51 AM

Hi,

Can anyone help to reduce the height of boostrap datepicker widget because the default height is bigger and does not matches the form , below is my code

<div class="input-group date datepicker col-md-6 col-xs-6" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="max-width:155px">
                                    <input class="form-control" size="16" type="text" value="">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>

 

Posted on Jan 07, 2016 06:20 AM Modified on on Jan 07, 2016 07:55 AM

Hi sagarnayak,

Please efer the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.form-control').datepicker();
        });
    </script>
    <style type="text/css">
        body
        {
            line-height: 0;
        }
        .dropdown-menu
        {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="input-group date datepicker col-md-6 col-xs-6" data-date="" data-date-format="dd MM yyyy"
        data-link-field="dtp_input2" data-link-format="yyyy-mm-dd" style="max-width: 155px">
        <input id="input" class="form-control" size="16" type="text" value="">
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    </form>
</body>
</html>
Demo

 

 

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html