Loading a JsTree in Iframe is messing up the elements identation

201 views
Skip to first unread message

Ravi K

unread,
Jun 17, 2015, 2:29:07 PM6/17/15
to jst...@googlegroups.com
Hey,
I am using a JsTree in an iframe and the indentation of the parent and child elements is not been displayed correctly.
I have tried debugging and inspecting the elements and not been able to figure out how to fix the issue.



html:

<div class="elementIFrameDiv">
            <iframe id="ctl00_PageContentPlaceHolder_DemographicElementGroupControl_ElementFrame" name="ElementFrame" scrolling="auto" frameborder="0" height="300" width="500" noresize="" src="DemographicElement.aspx?groupName=Default&amp;groupId=Default&amp;elementId=72790&amp;selectedPredicates=&amp;filterPredicates=&amp;selectedFloor=&amp;selectedCeil=&amp;groupImage=">

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>

</title><link rel="stylesheet" type="text/css" href="Styles/jqueryui/themes/base/jquery-ui.css"><link rel="stylesheet" type="text/css" href="ScriptLibraries/Styles/jstree.css"><link rel="stylesheet" type="text/css" href="Styles/DemographicTreeViewElement.base.css">
<link rel="stylesheet" type="text/css" href="Styles/Demographics.base.css">
<link rel="stylesheet" type="text/css" href="Styles/Site.Allstate.css">
</head>

    <body id="MasterPageBody">
        <!-- $Header: /CPPM.CSD.DirectLink/DirectLink.root/DirectLink/DLWeb/DemographicElement.aspx 9     12/05/07 3:12p Prabhu $ -->
        <form method="post" action="DemographicElement.aspx?groupName=Default&amp;groupId=Default&amp;elementId=72790&amp;selectedPredicates=&amp;filterPredicates=&amp;selectedFloor=&amp;selectedCeil=&amp;groupImage=" id="DemographicElementForm">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTgxODAwOTc1Nw9kFgICAw9kFgICAQ9kFgYCAw9kFgYCAQ8WAh4EVGV4dAUrPGRpdiBjbGFzcz0iRWxlbWVudEdyb3VwTmFtZUhlYWRpbmciPjwvZGl2PmQCCQ8QZGQWAGQCEQ8QZGQWAGQCBQ9kFgICAQ8WAh8ABSs8ZGl2IGNsYXNzPSJFbGVtZW50R3JvdXBOYW1lSGVhZGluZyI+PC9kaXY+ZAIHDw8WAh4HVmlzaWJsZWdkFgICAQ9kFgJmDxYCHwAFGVNJQyBDb2RlIG9yIERlc2NyaXB0aW9uOiBkZOVI2G3qWXN98PcuJIRIJztsMnsLd0gnOXeOUgoDV9s0">
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['DemographicElementForm'];
if (!theForm) {
    theForm = document.DemographicElementForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebOrder/WebResource.axd?d=hgwI5TYruR3ugwD6fQntMrOcTX2QACy9DTCyyqgEZMzeMLM3kQ9KZGvSouOq4VVLoUXpx6YaoupqJSE8G2wi3xx-jBJ-dW4epws4Li0JKn41&amp;t=635586505120000000" type="text/javascript"></script>


<script src="/WebOrder/ScriptResource.axd?d=XZdLSnEDlKh3Y3f3d817BPS5bTuDuowDGCcbTFaxv4vVeUl4RQlVQFQLh6QnAy1gQzdFuXWuLmMj4UVgvVzVJbdrGTySZdWlkwXYYwTcy_BHUrZrEobbv46RrVsveZDfft5OvVxNI8nV2LAIjndIwP6pSC9hrUxjNWEw1frc6lVoldM1mrBXadsudSWG5cIG0&amp;t=7b689585" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/WebOrder/ScriptResource.axd?d=FyX_cR60Q3Qru8E5Hz1eTjaMiXUzFvwB0f8RiXJhxZJOCXJzdTpBkyC8oaWRDUQWyyuDo6DRmCs1Iruvl-rNJcNdypcSRuNiMs2Yk9fuv6qnSpE_-0QHvmsGW8jzAQdjdryWH8-p1iMJB4KYn3LqM0JUAplqsRLMxsYxvXh_o4s_sOC5o_OKMf0lV0KbL-LJ0&amp;t=7b689585" type="text/javascript"></script>
<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="F373005D">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAPGN33jzYQjqjm20wjD+9NvOcy7TJlQzh75tl9Mi/S4nBqbK3tTErTaixlxxF54XPgGhiFzaZJtCOGBNIy+dyTllBqT+D+5k92JUCltnb9CcA==">
</div>
            <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('DemographicElementScriptManager', 'DemographicElementForm', [], [], [], 90, '');
//]]>
</script>


            <script language="javascript" type="text/javascript" src="Include/trim.js"></script>
            <script language="javascript" type="text/javascript" src="Include/date.js"></script>
            <script language="javascript" type="text/javascript" src="Include/FormatMoney.js"></script>
            <script type="text/javascript" src="ScriptLibraries/jquery-1.11.0.min.js"></script>
            <script type="text/javascript" src="ScriptLibraries/jquery-ui-1.10.4.min.js"></script>
            <script type="text/javascript" src="ScriptLibraries/jstree.js"></script>
            <script language="javascript" type="text/javascript" src="Include/DemographicTreeViewControl.js"></script>
            <script language="javascript" type="text/javascript" src="Include/DemographicElements.js"></script>

            <!-- Demographic Element-->
           

            <!-- Demographic Ranged Element-->
           

            <!-- Demographic TreeView Element-->
           

<div class="SearchControlArea">
    <table>
        <tbody><tr>
            <td>
                <div class="SearchText">
                    SIC Code or Description:



                </div>
            </td>
            <td>
                <input type="text" id="SearchTextbox">
            </td>
            <td>
                <div class="SearchButton">
                    <div class="btnLeft">
                        <div class="btnRight">
                        <p>
                             <input type="button" id="SearchButton" value="Search">
                        </p>
                        </div>
                    </div>
                </div>       
            </td>
            <td>
                <div class="ClearSearchText">
                   <input type="button" id="ClearSearchText" value="Clear">
                </div>
            </td>
        </tr>
    </tbody></table>
 </div>

<div id="selectElements"><input type="checkbox" name="SelectAll" id="selectAll">Select / UnSelect All</div>
<br>
<div id="TreeElementWrapper">
   <div id="DemographicTreeElement" class="jstree jstree-1 jstree-default jstree-checkbox-selection" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="1" aria-busy="false"><ul class="jstree-container-ul jstree-children jstree-no-icons jstree-striped" role="group"><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="1_anchor" id="1" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="1_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:1</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="2_anchor" aria-expanded="false" id="2" class="jstree-node  jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="2_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:2</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="3_anchor" id="3" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="3_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:3</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="4_anchor" aria-expanded="false" id="4" class="jstree-node  jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="4_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:4</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="5_anchor" id="5" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="5_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:5</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="6_anchor" aria-expanded="false" id="6" class="jstree-node  jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="6_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:6</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="7_anchor" id="7" class="jstree-node  jstree-leaf"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="7_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:7</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="8_anchor" aria-expanded="false" id="8" class="jstree-node  jstree-closed"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="8_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:8</a></li><li role="treeitem" aria-selected="false" aria-level="1" aria-labelledby="9_anchor" id="9" class="jstree-node  jstree-leaf jstree-last"><i class="jstree-icon jstree-ocl" role="presentation"></i><a class="jstree-anchor" href="#" tabindex="-1" id="9_anchor"><i class="jstree-icon jstree-checkbox" role="presentation"></i><i class="jstree-icon jstree-themeicon" role="presentation"></i>SIC Code:9</a></li></ul></div>
</div>


<div id="DemographicSearchResultsDialog">
    <div id="DemographicSearchResults">
      
    </div>
</div>


 <!-- This Panel is used to maintain the hidden text form controls -->
<div id="DemographicTreeViewControl_HiddenControlsPanel">
   
<input name="DemographicTreeViewControl$ElementId" type="hidden" id="DemographicTreeViewControl_ElementId" value="72790"><input name="DemographicTreeViewControl$GroupId" type="hidden" id="DemographicTreeViewControl_GroupId" value="Default">
</div>

<script type="text/javascript">
//<![CDATA[
LoadDemographicTreeViewElement(72790)//]]>
</script>
</form>
   


</body>
</html>

</iframe>
           
           
           
        </div>


I have tried some css styling to set the widths as below but that did not fix it.
#TreeElementWrapper
{
    width: 120px!important;
    height: 150px!important;
}

Ivan Bozhanov

unread,
Jun 17, 2015, 3:56:40 PM6/17/15
to jst...@googlegroups.com, prog...@gmail.com
jsTree will work fine in an iframe - the only reason for a messed up layout is CSS rules that you may have on the page, that use stronger selectors than jstree's.
I see you have a few CSS files included - I am sure the offender is there - just inspect a jstree node in your developer console, and look for CSS that is applied from those files and not from the browser defaults and the jstree default theme (check both the LI and UL nodes, possibly the anchor nodes too - I can't be more specific without a demo).

Best regards,
Ivan

Ravi K

unread,
Jun 25, 2015, 10:02:11 AM6/25/15
to jst...@googlegroups.com, prog...@gmail.com
Hey Ivan,
The body css have a text-align:center which was the culprit, i overrode that and now its working fine. Thanks.
Reply all
Reply to author
Forward
0 new messages