jQuery UI Widgets Forums Dialogs and Notifications Window jqxWindow with iframe and draggable/resizable

This topic contains 9 replies, has 2 voices, and was last updated by  Nadezhda 6 years, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author

  • lastrom
    Participant

    Hi,
    I have a jqxWindow that has an iframe in it that takes up 100% width and 100% height. I’m having two problems with the widget, one with resizable and one with draggable actions.

    I am unable to manually resize the window using the mouse as the resizing handles only show up in the top of the window and not on any other side or corner of the window. Is there a way to be able to resize the window using the resizing handles when the entire content area is an iframe?

    When I try to move the window (by clicking and dragging on the title bar) and my mouse enters the content area (which is an iframe), the draggable action ends. Is there a solution to fixing the draggable action when the mouse pointer enters the content area with an iframe?

    Thanks in advance!


    Nadezhda
    Participant

    Hello lastrom,

    You can set margin of the iframe to resolve the issue with mouse cursor on dragging. Here is an example which shows how to resize and drag window.

    <!DOCTYPE html>
    <html lang="en">
    <head>    
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <style>
            .container {
                width: 100%;
                height: 100%;
            }
    
            .iframe-class {
                width: 100%;
                height: 100%;            
                overflow: auto;
                margin:10px;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow").jqxWindow({
                    width: 200,
                    height: 150,
                    resizable: true,
                    draggable: true,
                    maxHeight: 2200,
                    maxWidth: 4000
                });           
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxwindow'>
            <div>Header</div>
            <div>
                <div class="container">
                    <iframe class="iframe-class" src="http://www.jqwidgets.com/"></iframe>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    lastrom
    Participant

    Thanks for the quick reply. Your example works, but it isn’t quite how we’re trying to use the window widget. Here’s an example that exhibits the problems described in my original post.

    Window Page:

    <!DOCTYPE html>
    <html lang="en">
    <head>    
        <title></title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <style>
            .container {
                width: 100%;
                height: 100%;
                margin:0px;
                padding:0px;
            }
    
            .iframe-class {
                width: 100%;
                height: 100%;
                margin:0px;
                padding:0px;
                border:0px;
            }
    
            .jqx-window-content{
              padding:0px;
              overflow:hidden;
            }
        </style>
        <script type="text/javascript">
          $(document).ready(function () {
            $("#jqxwindow").jqxWindow({
              width: 600,
              height: 400,
              resizable: true,
              draggable: true,
              maxHeight: 2200,
              maxWidth: 4000,
              isModal:true
            });
          });
        </script>
    </head>
    <body class='default'>
        <div id='jqxwindow'>
            <div>Header</div>
            <div>
                <div class="container">
                    <iframe class="iframe-class" width="100%" height="100%" scrolling="no" frameborder="0" src="../jqxgrid/fittowindow.htm"></iframe>
                </div>
            </div>
        </div>
    </body>
    </html>

    Iframe page:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to fit the jqxGrid to the browser window's size..</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <style>
            html, body{width: 100%; height: 100%; overflow: hidden; padding:0px; margin:0px;}
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = new Array();
    
                var firstNames =
                [
                    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                ];
    
                var lastNames =
                [
                    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                ];
    
                var productNames =
                [
                    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
                ];
    
                var priceValues =
                [
                    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
                ];
    
                for (var i = 0; i < 200; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
    
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
    
                    data[i] = row;
                }
    
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ],
                    datatype: "array"
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: '100%',
                    height: '100%',
                    source: dataAdapter,
                    columnsresize: true,
                    columns: [
                      { text: 'First Name', dataField: 'firstname', width: 100 },
                      { text: 'Last Name', dataField: 'lastname', width: 100 },
                      { text: 'Product', dataField: 'productname', width: 180 },
                      { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                      { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                      { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
          <div id="jqxgrid"></div>
      </body>
    </html>

    Nadezhda
    Participant

    Hi lastrom,

    Please, use the following styles and change the iframe tag content to <iframe class="iframe-class" src="src="../jqxgrid/fittowindow.htm""></iframe> .

        <style>
            .container {
                width: 100%;
                height: 100%;
            }
    
            .iframe-class {
                width: 100%;
                height: 100%;            
                overflow: hidden;
                margin: 10px;
                border: none;
            }
        </style>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    lastrom
    Participant

    That “technically” works, it just doesn’t display well as it has 2 sets of horizontal and vertical scrollbars.
    Screenshot:
    Screenshot

    Making the window larger to accommodate all content in the iframe without scrolling is not an option as the content will be scrolling both horizontally and vertically. Is there no way to only have a single set of scrollbars and make the window resizable?


    Nadezhda
    Participant

    Hi lastrom,

    Please, try with the following styles:

        <style>
            .container {
                width: 100%;
                height: 98%;
            }
    
            .iframe-class {
                width: 100%;
                height: 100%;            
                overflow: hidden;            
                margin-top:10px;
                border: none;
            }         
        </style>

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    lastrom
    Participant

    Is having that space around the grid the only way to have resizable work?

    Also, the issue with draggable still happens, is there a way around that?


    Nadezhda
    Participant

    Hi lastrom,

    In case when you are using iframe it is needed to use the space.

    You may add overflow: hidden; in container class if you want to take out the second scrollbar (vertical and horizontal).

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/


    lastrom
    Participant

    Thanks for the confirmation.

    Do you have a solution to the issue when moving the window around with an iframe inside?


    Nadezhda
    Participant

    Hi lastrom,

    The solution of this issue is setting margin-top of the iframe.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.