iframe scrolling issue using with treeview, splitter and tabs - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: 100%, iframe, jqxsplitter, jqxTabs, percent, pixel, splitter, tab, Tabs, width

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

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

Author

iframe scrolling issue using with treeview, splitter and tabs Posts
October 12, 2013 at 2:53 pm iframe scrolling issue using with treeview, splitter and tabs #30628

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>

October 14, 2013 at 5:08 am iframe scrolling issue using with treeview, splitter and tabs #30668

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/

October 15, 2013 at 8:16 am iframe scrolling issue using with treeview, splitter and tabs #30730

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.

October 15, 2013 at 8:59 am iframe scrolling issue using with treeview, splitter and tabs #30735
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/
October 15, 2013 at 5:59 pm iframe scrolling issue using with treeview, splitter and tabs #30769

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

October 16, 2013 at 7:48 am iframe scrolling issue using with treeview, splitter and tabs #30805

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/

January 23, 2017 at 6:43 am iframe scrolling issue using with treeview, splitter and tabs #90886
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();
}
January 24, 2017 at 5:59 am iframe scrolling issue using with treeview, splitter and tabs #90930

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/
Author

Posts

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

You must be logged in to reply to this topic.