jQWidgets Forums

Tagged: indentation, jqxtree, RTL, Tree

This topic contains 8 replies, has 3 voices, and was last updated by sarago 9 years, 8 months ago.

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

Author

jqxTree indentation problem in rtl:true Posts
January 10, 2015 at 6:09 am jqxTree indentation problem in rtl:true #65216

abbasi60
Participant

Hi Dear Sirs,

In this example jqxTree indentaion in rtl:true doesn’t work properly.
What’s wrong?

Best regards

This is full HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html>
<HEAD>
<link rel=”shortcut icon” href=”/favicon.ico” />
<TITLE>test</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=UTF-8″>

<meta http-equiv=”Expires” content=”-1″>
<meta http-equiv=”Pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>

<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />

<script src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>

<script type=”text/javascript”>
var source = [
{ icon: “../../images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “../../images/calendarIcon.png”, label: “Calendar” },
{ icon: “../../images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{ icon: “../../images/folder.png”, label: “Inbox”, expanded: false, items: [
{ icon: “../../images/folder.png”, label: “Admin” },
{ icon: “../../images/folder.png”, label: “Corporate” },
{ icon: “../../images/folder.png”, label: “Finance” },
{ icon: “../../images/folder.png”, label: “Other” ,expanded: false, items: [
{ icon: “../../images/folder.png”, label: “11111” },
{ icon: “../../images/folder.png”, label: “222222” , items:[
{ icon: “../../images/folder.png”, label: “0000” },
{ icon: “../../images/folder.png”, label: “8888” }
]},
{ icon: “../../images/folder.png”, label: “333333” },
{ icon: “../../images/folder.png”, label: “44444” },
]
},
]
},
{ icon: “../../images/recycle.png”, label: “Deleted Items” },
{ icon: “../../images/notesIcon.png”, label: “Notes” },
{ iconsize: 14, icon: “../../images/settings.png”, label: “Settings” },
{ icon: “../../images/favorites.png”, label: “Favorites” },
];

$(document).ready(function () {
$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’,panels: [{ size: ‘90%’ , collapsible: false}, { size: ‘10%’ , collapsible: true}] });
$(‘#topSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, resizable: false, orientation: ‘horizontal’,panels: [{ size: 93 , collapsible: false}, { size: ‘100%’ , collapsible: false}] });
$(‘#rightSplitter’).jqxSplitter({ height: ‘100%’, panels: [{ size: ‘80%’, collapsible: false }, { size: ‘20%’, collapsible: true}] });
$(‘#rightSplitter2’).jqxSplitter({ height: ‘100%’, panels: [{ size: ‘10%’, collapsible: true }, { size: ‘90%’}] });
$(‘#menu-tree’).jqxTree({ width:”100%”, height: “100%”, rtl:true, source:source});
});
</script>
<style type=”text/css”>
html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
</head>

<BODY class=’default’>
<div id=”mainSplitter” >
<div>
<div id=”topSplitter”>
<div id=”topPanel” >
Top – North
</div>
<div>
<div id=”rightSplitter”>
<div>
<div id=”rightSplitter2″>
<div id=”contentLeft”>
This is the west pane, closable, slidable and resizable
</div>
<div id=”contentPanel”>
Content Panel
</div>
</div>
</div>
<div id=’treePanel’>
<div id=”menu-tree” ></div>
</div>
</div>
</div>
</div>
</div>
<div id=”bottomPanel”>
Bottom – South
</div>
</div>

</BODY>
</html>

January 12, 2015 at 8:46 am jqxTree indentation problem in rtl:true #65246
Nadezhda
Participant
Hello abbasi60,

The following example works on our side. Please, define the source of jqxTree after $(document).ready(function (){ and before initialisation of jqxSplitter (#mainSplitter). If this suggestion does not help you to fix the issue, please provide us with more information about jqxTree indentation.
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxTree
            var source = [
                {
                    icon: "../../images/mailIcon.png", label: "Mail", expanded: true, items: [
                      { icon: "../../images/calendarIcon.png", label: "Calendar" },
                      { icon: "../../images/contactsIcon.png", label: "Contacts", selected: true }
                    ]
                },
                {
                    icon: "../../images/folder.png", label: "Inbox", expanded: true, items: [
                     { icon: "../../images/folder.png", label: "Admin" },
                     { icon: "../../images/folder.png", label: "Corporate" },
                     { icon: "../../images/folder.png", label: "Finance" },
                     { icon: "../../images/folder.png", label: "Other" },
                    ]
                },
                { icon: "../../images/recycle.png", label: "Deleted Items" },
                { icon: "../../images/notesIcon.png", label: "Notes" },
                { iconsize: 14, icon: "../../images/settings.png", label: "Settings" },
                { icon: "../../images/favorites.png", label: "Favorites" },
            ];

            $("#mainSplitter").jqxSplitter({ width: "100%", height: "100%", orientation: "horizontal", panels: [{ size: '90%', collapsible: false }, { size: '10%', collapsible: true }] });
            $("#topSplitter").jqxSplitter({ width: "100%", height: "100%", resizable: false, orientation: 'horizontal', panels: [{ size: 93, collapsible: false }, { size: '100%', collapsible: false }] });
            $("#rightSplitter").jqxSplitter({ height: "100%", panels: [{ size: '80%', collapsible: false }, { size: '20%', collapsible: true }] });
            $("#rightSplitter2").jqxSplitter({ height: '100%', panels: [{ size: '10%', collapsible: true }, { size: '90%' }] });
            $("#menu-tree").jqxTree({ width: "100%", height: "100%", rtl: true, source: source });
        });
    </script>
</head>
<body class='default'>
    <div id="mainSplitter">
        <div>
            <div id="topSplitter">
                <div id="topPanel">Top – North</div>
                <div>
                    <div id="rightSplitter">
                        <div>
                            <div id="rightSplitter2">
                                <div id="contentLeft">This is the west pane, closable, slidable and resizable</div>
                                <div id="contentPanel">Content Panel</div>
                            </div>
                        </div>
                        <div id="treePanel">
                            <div id="menu-tree"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottomPanel">Bottom – South</div>
    </div>
</body>
</html>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
January 12, 2015 at 5:12 pm jqxTree indentation problem in rtl:true #65274

abbasi60
Participant

Thanks for your attention.
please use my jqxTree source .
I attached the tree .

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html lang=”en”>
<head>
<title></title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxtree.js”></script>
<script type=”text/javascript” src=”../../jqwidgets/jqxsplitter.js”></script>
<style type=”text/css”>
html, body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxTree
var source = [
{
icon: “../../images/mailIcon.png”, label: “Mail”, expanded: true, items: [
{ icon: “../../images/calendarIcon.png”, label: “Calendar” },
{ icon: “../../images/contactsIcon.png”, label: “Contacts”, selected: true }
]
},
{
icon: “../../images/folder.png”, label: “Inbox”, expanded: true, items: [
{ icon: “../../images/folder.png”, label: “Admin” },
{ icon: “../../images/folder.png”, label: “Corporate” },
{ icon: “../../images/folder.png”, label: “Finance” },
{ icon: “../../images/folder.png”, label: “Other” ,expanded: false, items: [
{ icon: “../../images/folder.png”, label: “11111” },
{ icon: “../../images/folder.png”, label: “222222” , items:[
{ icon: “../../images/folder.png”, label: “0000” },
{ icon: “../../images/folder.png”, label: “8888” }
]},
{ icon: “../../images/folder.png”, label: “333333” },
{ icon: “../../images/folder.png”, label: “44444” },
]
},
]
},
{ icon: “../../images/recycle.png”, label: “Deleted Items” },
{ icon: “../../images/notesIcon.png”, label: “Notes” },
{ iconsize: 14, icon: “../../images/settings.png”, label: “Settings” },
{ icon: “../../images/favorites.png”, label: “Favorites” },
];

$(“#mainSplitter”).jqxSplitter({ width: “100%”, height: “100%”, orientation: “horizontal”, panels: [{ size: ‘90%’, collapsible: false }, { size: ‘10%’, collapsible: true }] });
$(“#topSplitter”).jqxSplitter({ width: “100%”, height: “100%”, resizable: false, orientation: ‘horizontal’, panels: [{ size: 93, collapsible: false }, { size: ‘100%’, collapsible: false }] });
$(“#rightSplitter”).jqxSplitter({ height: “100%”, panels: [{ size: ‘80%’, collapsible: false }, { size: ‘20%’, collapsible: true }] });
$(“#rightSplitter2”).jqxSplitter({ height: ‘100%’, panels: [{ size: ‘10%’, collapsible: true }, { size: ‘90%’ }] });
$(“#menu-tree”).jqxTree({ width: “100%”, height: “100%”, rtl: true, source: source });
});
</script>
</head>
<body class=’default’>
<div id=”mainSplitter”>
<div>
<div id=”topSplitter”>
<div id=”topPanel”>Top – North</div>
<div>
<div id=”rightSplitter”>
<div>
<div id=”rightSplitter2″>
<div id=”contentLeft”>This is the west pane, closable, slidable and resizable</div>
<div id=”contentPanel”>Content Panel</div>
</div>
</div>
<div id=”treePanel”>
<div id=”menu-tree”></div>
</div>
</div>
</div>
</div>
</div>
<div id=”bottomPanel”>Bottom – South</div>
</div>
</body>
</html>

January 12, 2015 at 5:13 pm jqxTree indentation problem in rtl:true #65275

abbasi60
Participant

Sorry this is the image

January 13, 2015 at 10:13 am jqxTree indentation problem in rtl:true #65299
Nadezhda
Participant
Hi abbasi60,

Please, add the following css to the above styles. I hope it would be helpful.
```
.jqx-tree-dropdown {
    padding: 0px 10px 0px 0px!important;
}
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
January 13, 2015 at 6:12 pm jqxTree indentation problem in rtl:true #65317

abbasi60
Participant

Hi Nadezhda,
very thanks for your help.

the above css worked with FireFox. but didn’t work with IE9.

Best regards

January 14, 2015 at 9:02 am jqxTree indentation problem in rtl:true #65341

Nadezhda
Participant

Hi abbasi60,

You can increase the value of width of tree panel and this issue should be resolved.

Best Regards,
Nadezhda

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

June 23, 2015 at 1:14 pm jqxTree indentation problem in rtl:true #72906

sarago
Participant

Hi,

Increasing of width does not help.
It seems to be a bug in the library.
Take a look in this page of jqxWidget http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/#demos/jqxtree/rtl.htm, “right to left layout” tab,
in IE9. You can see the same problem.

June 23, 2015 at 2:03 pm jqxTree indentation problem in rtl:true #72910

sarago
Participant

I think the only solution is to create the “rtl” feature yourself.
This css does the work fine:

.jqx-tree-item-li {
text-align: right;
direction: rtl;
margin-left: 0 !important;
}

[class=”jqx-tree-item-li”] {
margin-right: 16px !important;
}

span[class*=”jqx-tree-item-“] {
float: right !important;
}

.jqx-tree-dropdown-root {
width: 190px !important;
}

.jqx-tree-dropdown {
padding: 0 10px 0 0;
}
Author

Posts

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

You must be logged in to reply to this topic.