jqxWindow with iframe and draggable/resizable - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: draggable, iframe, jqxwindow, resizable, window

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

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

Author

jqxWindow with iframe and draggable/resizable Posts

October 22, 2014 at 3:49 pm jqxWindow with iframe and draggable/resizable #61504

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!

October 23, 2014 at 9:45 am jqxWindow with iframe and draggable/resizable #61522

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/

October 23, 2014 at 6:46 pm jqxWindow with iframe and draggable/resizable #61549

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>

October 24, 2014 at 8:25 am jqxWindow with iframe and draggable/resizable #61593

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/

October 28, 2014 at 3:26 pm jqxWindow with iframe and draggable/resizable #61752

lastrom

Participant

That “technically” works, it just doesn’t display well as it has 2 sets of horizontal and vertical scrollbars.
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?

October 29, 2014 at 12:16 pm jqxWindow with iframe and draggable/resizable #61787

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/

October 29, 2014 at 2:18 pm jqxWindow with iframe and draggable/resizable #61808

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?

October 29, 2014 at 2:44 pm jqxWindow with iframe and draggable/resizable #61810

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/

October 29, 2014 at 2:45 pm jqxWindow with iframe and draggable/resizable #61811

lastrom

Participant

Thanks for the confirmation.

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

October 30, 2014 at 6:37 am jqxWindow with iframe and draggable/resizable #61841

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/

Author

Posts

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

You must be logged in to reply to this topic.