Scrollbar issue : Datepicker in Modal Iframe[Answered] RSS

4 replies

Last post Mar 26, 2020 03:46 PM by garybenson

‹ Previous Thread|Next Thread ›

Shortcuts

garybenson

Member

3 Points

36 Posts

Scrollbar issue : Datepicker in Modal Iframe

Mar 25, 2020 01:39 PM|garybenson|LINK

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.

yij sun

Contributor

3730 Points

1424 Posts

Re: Scrollbar issue : Datepicker in Modal Iframe

Mar 26, 2020 04:13 AM|yij sun|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

- Reply
garybenson
Member

3 Points

36 Posts

Re: Scrollbar issue : Datepicker in Modal Iframe

Mar 26, 2020 05:02 AM|garybenson|LINK

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.

yij sun

Contributor

3730 Points

1424 Posts

Re: Scrollbar issue : Datepicker in Modal Iframe

Mar 26, 2020 07:47 AM|yij sun|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

- Reply
garybenson
Member

3 Points

36 Posts

Re: Scrollbar issue : Datepicker in Modal Iframe

Mar 26, 2020 03:46 PM|garybenson|LINK

Hi,

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

‹ Previous Thread|Next Thread ›