Remove From My Forums

Scrollbar issue : Datepicker in Modal Iframe

Question

User-1189289792 posted

Hi,

I am using bootstrap datepicker in Iframe which opens in bootstrap modal.

Below is a page which opens modal popup with iframe:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>           
        <a data-toggle="modal" data-target="#myModal" class="btn btn-default">Open</a>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 id="myModalTitle" class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        <iframe src="Webform2.aspx" frameborder="0" width="100%"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

and here is datepicker page which is opened in ifame:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.date-picker').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: false,
                autoclose: true,
                clearBtn: true,
                disableTouchKeyboard: true
            });
        });
    </script>
</body>
</html>

Now, when popup page is opened and we open a datepicker in textbox then it adds scrollbar to iframe. My date textbox is at the bottom of popup page and I do not want to increase Iframe height. Is there a way we can avoid scrollbar and datepicker is shown beyond popup box.

Thank you.

Wednesday, March 25, 2020 1:39 PM

Answers

User1535942433 posted

Hi garybenson,

Accroding to your description,as far as I think,if you want to adjust the datepicker's position above on the textbox,you could set 'orientation' top in datepicker.However,the height of iframe must more than the height of datepicker.Of course,it is not possible to set datepicker out of modal box while the textbox is in the modal.If the height of datapicker is more than the iframe and you don't want to increase the height of the iframe, you could adjust the datepicker's size.

Since you don't post full codes,I create a demo.

More details,you could refer to below codes:

WebForm74.aspx

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" />
    <style>
        table, th, td {
            padding: 15px;
        }
        table {
            border-spacing: 30px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>Name:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Age:<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                 <td>Sex:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Phone:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Address:<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>data: <asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox></td>
            </tr>
        </table>

    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.date-picker').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: false,
                autoclose: true,
                clearBtn: true,
                disableTouchKeyboard: true,
                orientation: "top left"
            })

        });
    </script>
</body>
</html>

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
        .modal-body {
            height:500px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a data-toggle="modal" data-target="#myModal" class="btn btn-default">Open</a>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 id="myModalTitle" class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <iframe src="WebForm74.aspx"  frameborder="0" width="100%" height=400px"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Result:

Best regards,

Yijing Sun

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, March 26, 2020 7:47 AM

All replies

User1535942433 posted

Hi garybenson,

garybenson
My date textbox is at the bottom of popup page and I do not want to increase Iframe height

Accroding to your description,as far as I think,you could reduce the datapicker size to fit your iframe.You need to add jquery.ui.css and change font-size in .ui-widget.Besides,you could adjust the textbox margin-top to set at the bottom of popup page.

More details,you could refer to below codes:

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a data-toggle="modal" data-target="#myModal" class="btn btn-default">Open</a>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 id="myModalTitle" class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <iframe src="WebForm74.aspx"  frameborder="0" width="100%"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

WebForm74.aspx:

<head runat="server">

    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link href="Content/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server" style="margin-top:125px">
        <div>
            <asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox>
        </div>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="Scripts/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.date-picker').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: false,
                autoclose: true,
                clearBtn: true,
                disableTouchKeyboard: true,


            })

        });
    </script>
</body>
</html>

Jquery-ui.css:

.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size:8px!important;
}

Result:

More details,you could refer to below article:

https://jqueryui.com/download/all/

Best regards,

Yijing Sun

Thursday, March 26, 2020 4:13 AM

0

Sign in to vote

User-1189289792 posted

Hi,

Thanks for looking into my code.

But the code given is just a sample and my actual form is having other textboxes above datepicker textbox. You can see below screen:

https://imgur.com/a/PSzbrdb

What I am looking for is either datepicker should open completely in modal box without scrollbar by adjusting datepicker's position or it should go out of modal box to avoid scollbar.

Thank you.

Thursday, March 26, 2020 5:02 AM

User1535942433 posted

Hi garybenson,

Since you don't post full codes,I create a demo.

More details,you could refer to below codes:

WebForm74.aspx

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" />
    <style>
        table, th, td {
            padding: 15px;
        }
        table {
            border-spacing: 30px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table>
            <tr>
                <td>Name:<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Age:<asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                 <td>Sex:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Phone:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Address:<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>data: <asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox></td>
            </tr>
        </table>

    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.date-picker').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: false,
                autoclose: true,
                clearBtn: true,
                disableTouchKeyboard: true,
                orientation: "top left"
            })

        });
    </script>
</body>
</html>

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <style>
        .modal-body {
            height:500px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a data-toggle="modal" data-target="#myModal" class="btn btn-default">Open</a>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 id="myModalTitle" class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <iframe src="WebForm74.aspx"  frameborder="0" width="100%" height=400px"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Result:

Best regards,

Yijing Sun

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, March 26, 2020 7:47 AM

0

Sign in to vote

User-1189289792 posted

Hi,

Thanks a lot for your help. As per your suggestion I used orientation and also added some CSS to reduce date-picker height.

Thursday, March 26, 2020 3:46 PM

Answered by:

Scrollbar issue : Datepicker in Modal Iframe

Question

Answers

All replies

garybenson