jQuery UI Widgets Forums Layouts Splitter iframe scrolling issue using with treeview, splitter and tabs

This topic contains 7 replies, has 3 voices, and was last updated by  Dimitar 3 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • Aemal
    Participant

    I am using iframe to load the content of sub pages inside the tabs, but initially when the page is loaded the iframe width is not appeared 100%, although the width property is set to 100%, but when I re-size the splitter, the width is stick to 100%.

    The initial load looks like this.

    When you scroll the scroll views like this.

    Following is the whole code of this page:

    <code>

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>MIS</title>
    <link rel=”stylesheet” href=”assets/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”assets/jqwidgets/styles/jqx.arctic.css” type=”text/css” />
    <script type=”text/javascript” src=”assets/scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxtabs.js”></script>
    <script type=”text/javascript” src=”assets/scripts/gettheme.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxexpander.js”></script>
    <script type=”text/javascript” src=”assets/jqwidgets/jqxmenu.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    var theme = “arctic”;

    $(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, resizable: ‘false’, panels: [{ size: ‘200px’ }, { size: ‘80%’ }] });

    $(“#jqxExpander”).jqxExpander({toggleMode: ‘none’, showArrow: false, width: “100%”, height: “100%”, theme: theme,
    initContent: function () {
    $(‘#jqxTree’).jqxTree({ height: ‘100%’, width: ‘100%’, theme: theme });
    //$(‘#iframe’).html(‘<iframe src=”http://localhost:8080/jqwidget/demos/php/billing_form.htm” scrolling=”yes” style=”width:99%;height:98%;” frameborder=”1″></iframe>’);

    }
    });

    $(‘#jqxTabs’).jqxTabs({ width: ‘100%’, height: ‘100%’, showCloseButtons:true, selectionTracker: true, position: ‘top’, theme: theme });

    });
    </script>
    <style type=”text/css”>
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>

    </head>
    <body>
    <div style=”position: absolute; width: 100%; height: 50px;”>
    <div style=”position: absolute; width: 100%; height: 50px; z-index: 100;”>
    Header
    </div>
    </div>

    <div style=”position: absolute; -moz-box-sizing:border-box;ย  padding-top: 50px; padding-bottom: 20px; width: 100%; height: 100%;”>
    <div id=”mainSplitter”>
    <div>

    <div id=’jqxWidget’ style=”height:100%”>
    <div style=”border: none;” id=’jqxExpander’>
    <div>
    Feeds</div>

    <div>
    <div id=’jqxTree’>
    <ul>
    <li item-expanded=’true’ id=”t1″>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/contactsIcon.png’ /><span
    item-title=”true”>News and Blogs</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/favorites.png’ /><span
    item-title=”true”>Favorites</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>ScienceDaily</span> </li>
    </ul>
    </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>Geek.com</span> </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>CNN.com</span> </li>
    </ul>
    </li>
    <li item-expanded=’true’ id=”t1″>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/contactsIcon.png’ /><span
    item-title=”true”>News and Blogs</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/favorites.png’ /><span
    item-title=”true”>Favorites</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>ScienceDaily</span> </li>
    </ul>
    </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>Geek.com</span> </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>CNN.com</span> </li>
    </ul>
    </li>
    <li item-expanded=’true’ id=”t1″>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/contactsIcon.png’ /><span
    item-title=”true”>News and Blogs</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/favorites.png’ /><span
    item-title=”true”>Favorites</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>ScienceDaily</span> </li>
    </ul>
    </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>Geek.com</span> </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>CNN.com</span> </li>
    </ul>
    </li>
    <li item-expanded=’true’ id=”t1″>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/contactsIcon.png’ /><span
    item-title=”true”>News and Blogs</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/favorites.png’ /><span
    item-title=”true”>Favorites</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>ScienceDaily</span> </li>
    </ul>
    </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>Geek.com</span> </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>CNN.com</span> </li>
    </ul>
    </li>
    <li item-expanded=’true’ id=”t1″>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/contactsIcon.png’ /><span
    item-title=”true”>News and Blogs</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/favorites.png’ /><span
    item-title=”true”>Favorites</span>
    <ul>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>ScienceDaily</span> </li>
    </ul>
    </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>Geek.com</span> </li>
    <li>
    <img style=’float: left; margin-right: 5px;’ src=’assets/img/folder.png’ /><span
    item-title=”true”>CNN.com</span> </li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>

    <div style=”width:85%”>
    <div id=’jqxTabs’>
    <ul>
    <li style=”margin-left: 10px;”ย  hasclosebutton=’false’>Dashboard</li>
    </ul>
    <div id=”iframe” style=”max-width:150%; “>
    <iframe src=”http://localhost:8080/jqwidget/demos/php/billing_form.htm” frameborder=”0″ vspace=”0″ hspace=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” height=”100%” width=”100%”></iframe>
    </div>
    </div>
    </div>
    </div>
    </div>

    <div style=”position: absolute; bottom: 0; width: 100%; height: 20px;”>
    Footer
    </div>
    </body>
    </html>

    </code>

    • This topic was modified 6 years, 3 months ago by  Aemal.
    • This topic was modified 6 years, 3 months ago by  Peter Stoev. Reason: Moved to Splitter Forum

    Dimitar
    Participant

    Hello Aemal,

    We tested your example for the reported issue but everything works fine on our side. The iframe is initially 100% wide. Please make sure that you are using the latest version of jQWidgets (3.0.3).

    Best Regards,
    Dimitar

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


    Aemal
    Participant

    Hello Dimitar,

    I have downloaded the latest version but still the same problem, I have recorded a video of the same please watch. I think the width of the iframe is calculating the space that tree is occupying, therefore it is showed beyond the window width, I guess that by the time iframe is initialized the expander/tree control width is not placed or the splitter does is not initiated.
    This is a very crucial issue if we couldn’t fix it the application won’t be functional.


    Dimitar
    Participant

    Hi Aemal,

    The issue may originate in the icorrect initialization of your splitter. You cannot have one panel with width in pixels and one – in percent. They should either be both in pixels or in percent.

    You also should not set the width of the panels in the HTML:

    <div style=โ€width:85%โ€>

    We hope these tips help you solve your issue.

    Best Regards,
    Dimitar

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


    Aemal
    Participant

    Hi Dimitar,

    It worked! ๐Ÿ™‚
    The problem was that in the splitter I have used one panel width with pixel and one with percent like below:

    $(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: ‘200px’ }, { size: ‘80%’ }] });

    Now that I made it like following it worked:

    $(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: ‘20%’ }, { size: ‘80%’ }] });

    Thanks a heap for your superb support! ๐Ÿ™‚

    Regards,
    Aemal


    Dimitar
    Participant

    Hi Aemal,

    We are glad everything works fine and we have been of help. We would appreciate if you also update your YouTube video on the matter.

    Best Regards,
    Dimitar

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


    snehaljadhav
    Participant

    Hi,
    I am using vertical splitter with 1 panel using Jqxtree and another Jqxtab
    However when i try to implement scroll for tree using splitter it does come however it shows two scrolls one for splitter and another under jqxtree.
    One under Jqxtree works fine if we scroll down, however for splitter scroll does n’t work if the content is too much for jqxtree.
    How to resolve this issue of 2 scroll converting in one scroll
    <asp:Content ID=”Content4″ ContentPlaceHolderID=”maincontent” runat=”server”>
    <div id=”dashboardSplitter”>
    <div id=”splitter-panel” style=”overflow: auto”>
    <div id=’fosTreeGrid’ class=”fosTreeGrid”></div>
    </div>
    <div id=”splitter-panel2″>
    <div id=”sp2Tabs” class=”fosTreeGrid” style=””>

    • TEST 1
    • TEST 2

    <div>
    </div>
    <div>
    <div id=”fosTasksGrid” class=”fosTreeGrid”></div>
    </div>
    </div>
    </div>
    </div>
    </asp:Content>

    this.Init = function () {
    self.ElementDashboardSplitter.jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: ‘80%’, size: ‘20%’ }] });
    self.ElementFOSTreeGridView.jqxTree({ width: ‘100%’, height: ‘100%’ });
    self.ElementSP2Tab.jqxTabs({ height: ‘100%’, width: ‘100%’, position: ‘top’, showCloseButtons: true });
    self.DownloadInventory();
    }


    Dimitar
    Participant

    Hi snehaljadhav,

    Please try removing the border of the jqxTree (as done in the Integration with jqxGrid demo for the grid so that it can fit properly in the jqxSplitter panel). If this does not help solve your issue, please share a jsEditor/JSFiddle example that demonstrates it.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.