Tabs appear vertically when autoOpen value for jqxWindow is set to false.

[DollyBMember]

Hi,

I am working with jqxWindow and it contains 3 tabs.
The jqxWindw appears when I click a button in the toolbar of my jsp page. It use to work perfectly fine when I used below code.

$(‘#eventWindow’).jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, showCollapseButton: true
});

$(‘#tab1’).jqxTabs({ height: 300, theme: theme });

But when I set the autoOpen value to false for jqzWindow, the Tabs seems to apear Vertically instead of Horizontal. DOCTYPE exists in the page.
Am I doing something wrong here? Please suggest.

[milenParticipant]

Hi DollyB,

I am afraid that I am unable to reproduce the reported issue. Could you please, send a small sample which reproduces it to support@jqwidgets.com or post the sample here in the Forum? For code formatting, select the code and click the “Format HTML Code” button in the forum’s toolbar.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi Milen,

Here is the piece of code I was working with:

<link rel="stylesheet" href="/eMatrix/jsp/mars/jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/scripts/jquery1.7.2.min.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcore.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxwindow.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxbuttons.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxscrollbar.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxpanel.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxtabs.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcheckbox.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdata.js"></script> 
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxmenu.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.edit.js"></script>  
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.selection.js"></script> 
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxlistbox.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdropdownlist.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcheckbox.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcalendar.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxnumberinput.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdatetimeinput.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/globalization/jquery.global.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/scripts/gettheme.js"></script>	    
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.pager.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdropdownbutton.js"></script>	  
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxtree.js"></script>	    
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.columnsresize.js"></script> 
	    <script type="text/javascript">    
function createElements(theme) {
	            $('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
	                theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, showCollapseButton: true
	            });	            
	
				$('#tab1').jqxTabs({ height: 300, theme: theme });
}
$(document).ready(function () {                   
	            var theme = $.data(document.body, 'theme', theme);
	            if (theme == undefined) theme = '';
	            addEventListeners();
	            createElements(theme);
	            $("#jqxWidget").css('visibility', 'visible');
	        });
</script>
<div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
            <div id="eventWindow">
                <div> <mars:marstypeimage type="<%=bObj.getTypeName()%>" width="23" height="23" border="0" alt="View Object"/><font size="2"><B><I><%=bObj.getTypeName()%></I>:&nbsp;&nbsp;<%=bObj.getName()%>&nbsp;<%=bObj.getRevision()%>&nbsp;-&nbsp;<%=bObj.getAttributeValue(context, "Title", true)%></B></font></div>
                <div style="overflow: hidden;" id="windowContent">
                    <div id="tab1">
                        <ul style="margin-left: 30px;">
                            <li>Details</li>
                            <li>Attachments</li>
							<li>Reports</li>
                        </ul>
                        <div>
						   <div id="jqxgrid"></div> 
                        </div>   
						<div>			
							<div style="height: 25px; padding: 5px;" class="jqx-widget-header">						        
						        <input type="button" value="Add File" style="float: left;" id="addFileButton" onclick="javascript:openAddFilePopup()" />
						        <div style="margin-left: 5px; float: left;" id='jqxWidgetButton'></div>						        
						    </div>						
                            <div id="jqxgrid2"></div> 
                        </div>
						<div>
                             
                        </div>
                    </div>                    					
                </div> <!-- window content -->                
            </div> <!-- event winodw -->       
         </div> <!-- mainDemoContainer -->

[milenParticipant]

Hi DollyB,

The solution is to set the jqxTabs width to ‘100%’.

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

[DollyBMember]

Hi Milen,

The Tabs are appearring horizontally now. But the height got reduced. When I remove autoOpen: false for jqxWindow, everythign looks fine. I have emailed you the screenshot how my screen appears with the following code.

Is there any default settings enabled on setting autoOpen:false ?

$('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
	                theme: theme, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3, showCollapseButton: true
	            });	            
	
				$('#tab1').jqxTabs({ height: 300, width: '100%', theme: theme});

Need solution for this issue.

Regards
DollyB

[milenParticipant]

Hi DollyB,

After testing the reported issue more carefully, I think that you’ve found a rendering issue in jqxTabs when jqxWindow is initially closed and I would like to thank you about your feedback. I’ve created a new work item regarding it and we will do our best to resolve it for the next version of jQWidgets.

To make the jqxTabs to fit the jqxWindow, you can do this:

$('#tab1').jqxTabs({ height: '100%', width: '100%', theme: theme });

You can also specify height to the items by setting the CSS height.

<li style="padding: 10px; height: 20px;">Details</li>
<li style="padding: 10px; height: 20px;">Attachments</li>
<li style="padding: 10px; height: 20px;">Reports</li>

Best Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts