iframe can't be as wide as its jQuery dialog container

1
votes

Here is my test JavaScript for you to reproduce the problem: You will see iframe width is just about half of dialog wide. It seems that jQuery change iframe width to 'auto' instead of using the value I indicate.

<html>
<head>
    <link rel="stylesheet" href="./styles/smoothness/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" />
    <script type="text/javascript" src="./scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="./scripts/jquery-ui-1.7.2.custom.min.js"></script>  
    <script type="text/javascript">var $E = {};

        $E.modal = function(params) {

            return new function(params) {

              if (!params) {
                params = {width: 400, height : 300};  
              }
              var $obj = $("<div style='margin:0px;padding:0px;'></div>");
              var self = this;

              // parse json object to url query string
              var generateQueryString = function(data) {

                queryString = "";

                for (var o in data) {
                  queryString = queryString + "&" + o + "=" + data[o];
                }

                return queryString.replace(/^&/,"?");
              };

              // function - resize
              var resize = function(modal, frame) {
                frame.attr({
                  width : modal.width() ,
                  height : modal.height() 
                });
              };

              this.frame = $(document.createElement("iframe"));
              this.url = "";
              this.modal = $obj;

              /*
               * url : required, String, iFrame - src,
               * params : not required, json object, get args 
              */
              this.load = function(url, params) {

                var queryString = generateQueryString(params);
                var url = url + queryString;

                this.frame.attr({
                  src : url 
                });

                this.frame.dialog("open");
                this.frame.css('border','3px solid red'); //in order to show iframe cant be as wide as its outer dialog container.
                resize(this.modal, this.frame);
              };   

              this.close = function() {
                this.modal.dialog("close");  
              };

              this.frame.appendTo($obj);

              this.frame.dialog($.extend({
                autoOpen : false, 
                modal : true, 
                draggable : true, 
                resizable : true, 
                resize : function() {
                  resize(self.modal, self.frame);
                },
                drag : function() {
                  resize(self.modal, self.frame);
                }
              }, params));

            }(params);
        };

        // click link
        $(function() {
            $('a').click(function(e) {
                e.preventDefault();
                var $this = $(this);
                $E.modal({width:540,height:400}).load("2.html", {s_in_bank_key:'',s_in_acct_num:''});               
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><a href="http://www.google.com" title="Google Dialog">Google</a></li>
        <li><a href="http://jquery.com" title="jQuery Dialog">jQuery</a></li>
        <li><a href="http://jqueryui.com" title="jQuery UI Dialog">jQuery UI</a></li>
    </ul>
</body>
</html>

Please note that 2.html can contains anything.

2
jqueryiframe

2 Answers

0
votes

Here is how to find the problem because no one can use your code to reproduce the problem without having all of the dependencies.

Get Firefox with the Firebug

http://getfirebug.com/

You can select elements within the browser and get all of the CSS and HTML for that element then change these values so that you can find what the problem is. This is a must for UI development.

In addition you can debug JavaScript by setting breaks in the code live.

0
votes

Try with this code. Hope it will help you.

  $('#example').dialog({
        autoOpen: false,
        height:300,
        open: function() { $('#example iframe').height($(this).height()+60); $
('#example iframe').width($(this).width()-10); },
        resize: function() { $('iframe').hide(); },
        resizeStop: function() { $('iframe').show(); $('#example
iframe').height($(this).height()-70);  $('#example iframe').width($
(this).width()-40); }
});

$('#example').dialog("open");