[nsiomouMember]

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!

[nsiomouMember]

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>

[nsiomouMember]

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

[nsiomouMember]

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

[nsiomouMember]

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!

[Author]

Posts