I need the checkboxes to stick to the right side of the label.
This is how I want it to look:
https://i.sstatic.net/Ldu9P.png
Currently, when I use
right: 0; position: absolute !important;The checkboxes always stay on the right, even when scrolling horizontally, which is the desired behavior.
My problem is that when I scroll down, the checkboxes also move down with the scroll. Instead, I want them to stay aligned with the label and not scroll with the page, as shown in the image above.
https://i.sstatic.net/tWb93.png
Here is the CSS code:
.custom-tree-node {
// flex: 1;
// display: flex;
// width: 90%;
& > .custom-tree-node-buttons {
right: 0;
position: absolute !important;
}
& > .custom-tree-node-buttons {
& > .el-button-group {
& > .el-button {
padding: 2px 3px !important;
}
}
}
& > .custom-tree-node-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
position: relative;
}
HTML:
<Tree v-if="allStructuresTree.length > 0"
style="padding:0px;width: 100%;display: flex;"
class="custom-tree-node"
filterMode="strict"
:value="levelDetils"
:loading="loadingPrime"
ref="structureTree"
selectionMode="multiple"
v-model:selectionKeys="selectedKeys"
@nodeSelect="onCurrentNodeChanged"
:expandedKeys="expandedKeys"
@nodeExpand="onNodeExpand"
@nodeUnselect="onNodeUnselect"
>
<template #default="slotProps" style="padding:0px">
<div draggable="true" @dragstart="onDragging" id="123"
v-bind:class="
getStructureLabelClass(
slotProps.node.item.isHighlighted,
slotProps.node.item.isUnderlined
)
"
:title="slotProps.node.item.name"
>
<i
v-if="
slotProps.node.item.linkedTasks != null &&
slotProps.node.item.linkedTasks.length != 0
"
class="el-icon-fa-link"
v-on:click="showLinkedTask(slotProps.node.item.linkedTasks[0])"
></i>
<span
class="xeokit-context-menu-item noselect"
@mousedown.right="mousedown($event, slotProps.node)"
v-on:dblclick="doubleClick($event, slotProps.node)"
@contextmenu.prevent
>{{ slotProps.node.item.name }}</span
>
</div>
<div class="custom-tree-node-buttons" v-if="isSceneLoaded">
<el-button-group
class="treeBtns"
v-if="slotProps.node.item.visible"
>
<el-button style="padding:0px 5px; margin-right: 5px;"
@click="
focusOnItem(
$event,
slotProps.node.item.idOnScene,
slotProps.node
)
"
>
<i class="el-icon-fa-dot-circle-o"></i>
</el-button>
<el-button style="padding:0px 5px;">
<input
@click="toggleShowItem($event, slotProps.node)"
type="checkbox"
v-show="slotProps.node.item.entity"
v-bind:id="slotProps.node.objectId"
v-model="slotProps.node.item.entity.checked"
/>
</el-button>
</el-button-group>
</div>
</template>
</Tree>
}