jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › Tree checkboxes not aligned
This topic contains 4 replies, has 2 voices, and was last updated by Dimitar 11 years, 7 months ago.
-
Author
-
Hi,
I have a tree with checkboxes, in some of the lines the checkboxes are not aligned with the label, when I examine the html source I see that in the lines that are not aligned the margin-top is -3.5px and in the lines that are correct it is 4.5px
Do you know why this is happening, I’m using the default theme.
This is the HTML code I get (part of it as it is long).
Homenode(10.0.0.51)develop3 (10.0.0.34)mailsrv (10.0.0.3):
:Thanks,
Arikbd
This is the code
<ul class="jqx-tree-dropdown-root" style="width: 217px; min-width: 230px;"> <li id="home" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;"> <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: 4.5px; margin-left: 0px;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidgetd6c293a4cfce"> <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"> <div style="width: 13px; height: 13px;"> <span style="width: 13px; height: 13px;"></span> </div> </div> <div style="clear: both;"></div> </div> <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">Home</div> <ul class="jqx-tree-dropdown" style="overflow: hidden; display: none;"></ul> </li> <li id="root" role="treeitem" class="jqx-tree-item-li jqx-disableselect" style="margin-left: 0px; float: none;"> <span style="height: 17px; border: none; background-color: transparent; float: left; clear: both; width: 16px; margin-top: 3px;" id="arrowroot" class="jqx-tree-item-arrow-expand"></span> <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: 4.5px; margin-left: 16px;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidget4e6769d7a958"> <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"> <div style="width: 13px; height: 13px;"> <span style="width: 13px; height: 13px;"></span> </div> </div> <div style="clear: both;"></div> </div> <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">node</div> <ul class="jqx-tree-dropdown" style="overflow: hidden;"> <li id="3" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;"> <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: 4.5px; margin-left: 0px; opacity: 1;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidgete87ade8a3121"> <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"> <div style="width: 13px; height: 13px;"> <span style="width: 13px; height: 13px;"></span> </div> </div> <div style="clear: both;"></div> </div> <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item"> (10.0.0.51)</div> </li> <li id="2" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;"> <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: -3.5px; margin-left: 0px; opacity: 1;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidget977d22266f1d"> <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"> <div style="width: 13px; height: 13px;"> <span style="width: 13px; height: 13px;"></span> </div> </div> <div style="clear: both;"></div> </div> <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">develop3 (10.0.0.34)</div> </li> <li id="1" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;"> <div style="position: absolute; width: 13px; height: 13px; cursor: pointer; margin-top: -3.5px; margin-left: 0px; opacity: 1;" tabindex="0" class="chkbox jqx-widget jqx-checkbox" id="jqxWidget0688f74a337d"> <div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all"> <div style="width: 13px; height: 13px;"> <span style="width: 13px; height: 13px;"></span> </div> </div> <div style="clear: both;"></div> </div> <div style="display: inline-block; margin-left: 19px;" class="draggable jqx-rc-all jqx-tree-item jqx-item">mailsrv (10.0.0.3)</div> </li> <li id="5" role="treeitem" class="jqx-tree-item-li" style="margin-left: 16px;"> : : </li> </ul> </li></ul>
Hello arikbd,
Please check out the demo Checkboxes which shows how to create a tree with checkboxes. We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
So I cannot create a checkboxes tree from source structure? I need to create the tree structure from UL and LI tags?
I created the tree from object structure in source attibute.
Thanks,
Arik
Hello Arik,
Please provide us with your tree source and initialization code so that we may test it locally.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.