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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Tree checkboxes not aligned #25852

    arikbd
    Participant

    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

    Tree checkboxes not aligned #25853

    arikbd
    Participant

    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>
    Tree checkboxes not aligned #25864

    Dimitar
    Participant

    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/

    Tree checkboxes not aligned #25865

    arikbd
    Participant

    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

    Tree checkboxes not aligned #25877

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.