Tree checkboxes not aligned

[arikbdParticipant]

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).

Home

node

(10.0.0.51)

develop3 (10.0.0.34)

mailsrv (10.0.0.3)

:
:

Thanks,

Arikbd

[arikbdParticipant]

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>

[DimitarParticipant]

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,
Dimitar

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

[arikbdParticipant]

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

[DimitarParticipant]

Hello Arik,

Please provide us with your tree source and initialization code so that we may test it locally.

Best Regards,
Dimitar

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

[Author]

Posts