jqxWindow height differs in browsers - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

jqxWindow height differs in browsers Posts

April 30, 2013 at 11:30 am jqxWindow height differs in browsers #20344

Member

Hi,

The issue I am dealing with, refers to the height of the jqxWindow as it appears in different browsers. I have a jqxWindow but its height differs between Firefox, IE and Chrome. The difference ιs about 2px -3px. Does anyone have an idea of how I could possibly get over this dysfunctionality?

Thank you

May 1, 2013 at 8:53 am jqxWindow height differs in browsers #20400

Dimitar

Participant

Hello nsiomou,

We have tested on all these browsers but could not reproduce the reported behaviour (using version 2.8.2 of jQWidgets).

Here is a simple test example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow ").jqxWindow({ height: 90, width: 150, theme: 'summer' });
                $("#alert").click(function () {
                    var width = $("#jqxwindow ").width();
                    var height = $("#jqxwindow ").height();
                    alert("Window width is: " + width + ", height is: " + height);
                });
            });
        </script>
        <button id="alert">
            Alert</button>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                Content</div>
        </div>
    </div>
</body>
</html>

On all browsers, the alert shows the same values. It this the case on your side?

Best Regards,
Dimitar

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

May 8, 2013 at 9:33 am jqxWindow height differs in browsers #20744

nsiomou

Member

Thank you for the immediate response,
Let me be more specific. Actually, I have a jqxWindow with jqxTabs. In each tab I have 2 divs, one under the other and I would like the height to be adjusted according to the content of the divs. The best solution I came up with, was to change the jqxwindow’s height when the user clicks each tab manually eg. if (selectedTab == 0) {
$(“#PopupWindow”).height(‘500px’); }

In the last div I only have two buttons and I wanted the margin from the bottom of the button to the end (total height of the window) to be fixed. As I mentioned before , the problem is that this margin differs within the browsers. For example for a specific tab I set the height to 500 px. In firefox appears to be shorter and IE and Chrome appears 2px different.. I cannot understand the reason!

May 9, 2013 at 6:35 am jqxWindow height differs in browsers #20813

Dimitar

Participant

Hi nsiomou,

Please post a sample code, including the buttons, which we may run and test locally.

Best Regards,
Dimitar

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

May 9, 2013 at 9:46 am jqxWindow height differs in browsers #20822

nsiomou

Member

Here is a sample code:

For JQuery:

$(“#PopupWindow”).jqxWindow({

resizable: true,
width: ‘100%’,
height:541,
isModal: true,
autoOpen: false,
cancelButton: $(“#btnCancelIndicator”),
modalOpacity: 0.6,
theme: DefaultTheme
});

$(“#jqxTabs”).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
var height1 = 0;
var widht1 = 0;

if (selectedTab == 0) {
$(“#PopupWindow”).height(‘541px’);

}else if (selectedTab == 1) {
$(“#PopupWindow”).height(‘301px’);

}else if (selectedTab == 2) {
$(“#PopupWindow”).height(‘460px’);

}
$(“#PopupWindow”).jqxWindow({ width: widht1, height:height1});
});

For asp.NET

Edit Window

General information
…
…

some labels and inputs…

Change

Cancel

May 9, 2013 at 10:30 am jqxWindow height differs in browsers #20823

nsiomou

Member

Sorry I didn’t know how to edit my last post , so I submit again the code:

For JQuery:

$(“#PopupWindow”).jqxWindow({

resizable: true,
width: ’100%’,
height:541,
isModal: true,
autoOpen: false,
cancelButton: $(“#btnCancelIndicator”),
modalOpacity: 0.6,
theme: DefaultTheme
});

$(“#jqxTabs”).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
var height1 = 0;
var widht1 = 0;

if (selectedTab == 0) {
$(“#PopupWindow”).height(’541px’);

}else if (selectedTab == 1) {
$(“#PopupWindow”).height(’301px’);

}else if (selectedTab == 2) {
$(“#PopupWindow”).height(’460px’);

}
$(“#PopupWindow”).jqxWindow({ width: widht1, height:height1});
});

For asp.NET

Edit Indicator

General information
…

Some labels and Inputs…

Change

Cancel

May 10, 2013 at 6:18 am jqxWindow height differs in browsers #20895

Dimitar

Participant

Hi nsiomou,

We will also need your HTML code. Please re-post your sample and format it as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

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

May 10, 2013 at 7:37 am jqxWindow height differs in browsers #20910

nsiomou

Member

Sorry, I didn't know how to format my Code and edit my post. Here is one more time my sample code for a window which height is not the same in different browsers:
For JQuery:
$(“#PopupWindow”).jqxWindow({
resizable: true,
width: ’100%’,
height:541,
isModal: true,
autoOpen: false,
cancelButton: $(“#btnCancelIndicator”),
modalOpacity: 0.6,
theme: DefaultTheme
});
$(“#jqxTabs”).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
var height1 = 0;
var widht1 = 0;
if (selectedTab == 0) {
$(“#PopupWindow”).height(’541px’);
}else if (selectedTab == 1) {
$(“#PopupWindow”).height(’301px’);
}else if (selectedTab == 2) {
$(“#PopupWindow”).height(’460px’);
}
$(“#PopupWindow”).jqxWindow({ width: widht1, height:height1});
});
For HTML:
<div id="PopupWindow">
        <div>
            Edit Window
        </div>
        
        <div id="divEditCreateForm">
                <div id='jqxTabs'>
                    <ul>
                        <li>General information</li>
                        <li>...</li>
                        <li>...</li>
                    </ul>
                    <div id="Tab1" class="tab-page form">
                       
                                    <label >Name</label>
                                    <input type="text" class="text-input" /><br />
                    </div>
</div>
                <div id="DivButtons">
                    
                    <button type="button" id="btnChange" class="button">
                        Change</button>
                    <button type="button" id="btnCancel" class="button bClose">
                        Cancel</button>
                </div>
            </div>
      
    </div>

May 14, 2013 at 6:53 am jqxWindow height differs in browsers #21108

Dimitar

Participant

Hi nsiomou,

We have tested with this slightly modified version of your example and again found no difference between the height of the window in different browsers:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#PopupWindow").jqxWindow({
                resizable: true,
                width: "100%",
                height: 541,
                isModal: true,
                autoOpen: true,
                cancelButton: $("#btnCancelIndicator"),
                modalOpacity: 0.6,
                initContent: function (a) {
                    $("#jqxTabs").jqxTabs({ width: "100%", height: 90, position: 'top' });
                }
            });
            $("#jqxTabs").bind('selected', function (event) {
                var selectedTab = event.args.item;
                var height1 = 0;
                var widht1 = 0;
                if (selectedTab == 0) {
                    $("#PopupWindow").height('541px');
                } else if (selectedTab == 1) {
                    $("#PopupWindow").height('301px');
                } else if (selectedTab == 2) {
                    $("#PopupWindow").height('460px');
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="PopupWindow">
        <div>
            Edit Window
        </div>
        <div id="divEditCreateForm">
            <div id='jqxTabs'>
                <ul>
                    <li>General information</li>
                    <li>...</li>
                    <li>...</li>
                </ul>
                <div id="Tab1" class="tab-page form">
                    <label>
                        Name</label>
                    <input type="text" class="text-input" /><br />
                </div>
                <div>
                    ...
                </div>
                <div>
                    ...
                </div>
            </div>
            <div id="DivButtons">
                <button type="button" id="btnChange" class="button">
                    Change</button>
                <button type="button" id="btnCancel" class="button bClose">
                    Cancel</button>
            </div>
        </div>
    </div>
</body>
</html>

Here is a picture showing the windows in the three different browsers compared:
http://imageshack.us/photo/my-images/254/windowheightbrowsercomp.jpg/

Best Regards,
Dimitar

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

May 22, 2013 at 10:36 am jqxWindow height differs in browsers #21638

nsiomou

Member

Thank you again for your cross check. I changed the jquery so as to do not take fixed height and the jqxWindow’s height is the same to all browsers (height is set to 100%).
So now the problem is different. Which is the best way to change the window’s height dynamically in order to fit its content? I have a div which is displayed dynamically. When the div is visible, the window displays a scroll-bar on the right.. How can the whole window be visible without the scroll-bar depending each time to its content? I have been fighting with this problem for a long time.. I would appreciate it if you could help me find the best solution to fix this. Thanks!

May 28, 2013 at 6:09 am jqxWindow height differs in browsers #21952

Dimitar

Participant

Hi nsiomou,

You can achieve this by setting the height property of the window to auto and then updating the content with the setContent method.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.