jQWidgets Forums

jQuery UI Widgets Forums Navigation Tabs Tabs & iFrames

Tagged: 

This topic contains 19 replies, has 4 voices, and was last updated by  jccompagnon 9 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
  • Tabs & iFrames #8934

    shimmoril
    Participant

    I have a page w/ a combination of the splitter and tab controls. The tab content is actually iframes displaying other pages. For some reason it looks like the content area of the tab control has a hard-coded height, and this is preventing us from displaying the entire content. See the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>Nested Splitters with jqxTabs. The sample demonstrates how to add the jqxTabs widget inside a Split Panel</title>
    <link rel="stylesheet" href="/javascript/jqwidgets/2.4.2/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/javascript/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxsplitter.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxtabs.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    $('#splitter').jqxSplitter({ width: '100%', height: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });
    $("#tabswidget").jqxTabs({ theme: theme, height: '100%', width: '100%' });
    });
    </script>
    </head>
    <body class='default'>
    <div id="splitter">
    <div class="splitter-panel">
    West
    </div>
    <div class="splitter-panel">
    <div id="tabswidget">
    <ul>
    <li>Tab 2</li>
    </ul>
    <div>
    <iframe id="iframe2" src="http://jqwidgets.com" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" height="100%" width="100%"></iframe>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    The content div (

    <div class="jqx-tabs-content jqx-widget-content jqx-rc-b" style="float: none; width: 1053px; height: 178px;">

    ) has a hardcoded height, which prevents the iframe from displaying the full content of the page.

    Please provide instructions on how to override or remove this hardcoded height.

    Tabs & iFrames #8936

    Peter Stoev
    Keymaster

    Hi shimmoril,

    The height and width of the jqxTabs are set dynamically depending on the jqxTabs width and height settings. You cannot override the built-in behavior of the widget. When the widget is resized, the content area will be resized, too.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tabs & iFrames #8985

    shimmoril
    Participant

    It’s got nothing to do w/ the tabs themselves, its the content inside them. The tabs are set to 100% height and width (so no resizing should be necessary), but the content inside the tabs is being cut off at (an apparently random) height. How can I make the content of the tab display fully on the page?

    Tabs & iFrames #9013

    Peter Stoev
    Keymaster

    The content size of the jqxTabs depends on the size of the widget. Its width is equal to the width of jqxTabs. Its height is equal to the jqxTabs height – the height of the jqxTabs header area. That behavior is built-in and is by design. You cannot override it.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tabs & iFrames #9019

    fgaonet
    Member

    I have a similar problem. The tabs are set to 100% height and width. The tab content is another page loaded by AJAX. While the browser window resizing, the tabs automatically resize itself as expected, but the content page does not follow the change.

    For example, my content page is a div with 100% height and width too. If I shrink the browser window, some of the content page are cut out; if I enlarge the bowser window, the content page does not stretch the tab.

    Is it possible to improve this? At least we need a “resize” event on jqxTabs, and we can manually resize or reload the content on this event.

    Any idea?

    Thanks

    Tabs & iFrames #9023

    fgaonet
    Member

    I was not 100% correct stating my problem on the above post. Actually, my content page has several div with percent height and width.

    I found a solution. I placed a div with 100% height and width under the body, and move all other elements into this div. It fixed my problem.

    Tabs & iFrames #9127

    shimmoril
    Participant

    Peter: so you’re saying there’s no way I can make the content in the tabs fit the size of the screen? That the content area of the tabs will always be the size of the header area? How can this possibly be usable?

    I tried the suggestion of a div inside the body with 100% width/height and didn’t see any change.

    Tabs & iFrames #9134

    Peter Stoev
    Keymaster

    I will post my message again and will try to explain it better this time: “The content size of the jqxTabs depends on the size of the widget. Its width is equal to the width of jqxTabs. Its height is equal to: (jqxTabs height – the height of the jqxTabs header area). ” By content, I mean the area below the tabs header. If your tabs widget size is small, then your content’s size will be small, too. For example: jqxTabs with height set to 100px will have content ~80px(widget’s height – widget’s header height). In order to have a DIV tag resized to 100% width and height, you should have set the width and height of your body and html to 100%. In addition, you use a Splitter widget and I suggest you to see this help topic, too: jquery-splitter-getting-started.htm. There are 2 samples in the help topic which demonstrate how to expand a widget to fit to the document’s bounds – Fit to the document’s bounds and 3 pane Split Layout that fits to the document’s bounds.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tabs & iFrames #9196

    shimmoril
    Participant

    Thank you for your explanation Peter. Now I understand how the tabs are sized. As I have previously stated however, my tabs are set to 100% width and height, not a static size.

    I have attempted your suggestion of manually setting the body and html to 100% width and height, but it didn’t affect the size of the content area.

    Tabs & iFrames #9197

    Peter Stoev
    Keymaster

    Hi shimmoril,

    This works fine on my side and the tab’s content height is 100%. Hope you find it helpful!

    <!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.2.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <style>
    html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function () {
    //set up the splitter (left side is tree, right side is tabbed pages)
    $("#splitter").jqxSplitter({
    panels: [{ size: '20%' }, { size: '80%' }],
    height: '100%'
    });
    //set up the tabs
    $('#tabswidget').jqxTabs({
    width: '100%',
    height: '100%',
    position: 'top',
    showCloseButtons: true,
    reorder: true,
    scrollPosition: 'both'
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id="splitter">
    <div class="splitter-panel">
    West
    </div>
    <div class="splitter-panel">
    <div id="tabswidget">
    <ul>
    <li>Tab 2</li>
    </ul>
    <div>
    <iframe id="iframe2" src="http://jqwidgets.com" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" height="100%" width="100%"></iframe>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tabs & iFrames #9198

    shimmoril
    Participant

    Sorry Peter, I was editing as you were posting.

    After further investigation I think I have found the issue (or at least narrowed it down):
    When the page is first loaded, there is one tab open. Subsequent tabs are opened dynamically using addLast after an item in the tree (left side of splitter) is clicked. It appears that the dynamically added tabs will take the ‘height’ of the content of the first tab as their height, and will not expand further. For instance, if I create 5 paragraphs on the initial tab, the content of subsequently opened tabs will only show 5 paragraphs worth of content – regardless of the actual size of the content.

    This is a huge problem for us. Our iframe pages allow users to add and remove content dynamically (via jquery append), so the iframes need to be resized appropriately.

    Tabs & iFrames #9199

    Peter Stoev
    Keymaster

    Please, feel free to send us a sample to support@jqwidgets.com which demonstrates the reported behavior from your last post. You can also post it here, if you wish.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tabs & iFrames #9204

    shimmoril
    Participant

    See below for the example code. The First Tab content has 5 paragraphs initially; add another 5 to see the issue I described.

    <!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>
    <script type="text/javascript" src="/Javascript/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="/javascript/jqwidgets/2.4.2/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxcore.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxdata.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxbuttons.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxpanel.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxtree.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxtabs.js"></script>
    <script type="text/javascript" src="/javascript/jqwidgets/2.4.2/jqxsplitter.js"></script>
    <title>Tab Example</title>
    <script type="text/javascript">
    var theme = '';
    $(document).ready(function () {
    //set up the splitter (left side is tree, right side is tabbed pages)
    $("#splitter").jqxSplitter({
    theme: theme,
    panels: [{size: '20%'}, {size: '80%'}],
    height: '100%'
    });
    //set up the tabs
    $('#jqxTabs').jqxTabs({
    theme: theme,
    width: '100%',
    height: '100%',
    position: 'top',
    showCloseButtons: true,
    reorder: true,
    scrollPosition: 'both'
    });
    });
    function addTab() {
    var label = 'New Tab';
    var src = "http://www.jqwidgets.com";
    //add the new tab
    $('#jqxTabs').jqxTabs('addLast', label, '<div style="height: 100%;"><iframe src="' + src + '" height="100%" width="100%" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" /></div>');
    }
    </script>
    </head>
    <body>
    <div id="splitter">
    <div>
    <a href="#" onclick="addTab();">Add Tab</a>
    </div>
    <div id="ContentPanel">
    <div id='jqxTabs'>
    <ul id="unorderedList">
    <li>First Tab</li>
    </ul>
    <div style="height: 100%;">
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Tabs & iFrames #9233

    Peter Stoev
    Keymaster

    Hi shimmoril,

    You missed to add:

    <style>
    html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tabs & iFrames #9288

    shimmoril
    Participant

    That makes the iframe go to the bottom of the screen, but the full content of the iframe is still cut off. The iframe needs to be as tall as necessary to display all the content. It also needs to be able to expand dynamically as elements are added to the page.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.