HTML/CSS Checkbox text alignment with <span> or <div>
Question
I am trying to make the text appear as a block in inline with the checkbox and depending on the width of the sidebar.
Example
I have pasted the code onto CodePen (Keep in mind the screen resolution/width etc), I have tried to multiple tries with even changing from to as well as putting inline styling with "float left". To change from to can be done in the javascript under the "this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.css">
<link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview-theme-basic.css">
</head>
<body ng-app="bin">
<div ng-controller="DemoCtrl as demo">
<h3>Custom Node Templates</h3>
<div style=width:224px>
<div ivh-treeview="demo.stuff"
ivh-treeview-node-tpl="demo.tpl"
ivh-treeview-options="demo.customTreeViewOpts">
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script src="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.js"></script>
</body>
</html>
var stuff = [
{
label: "Sales",
selected: false,
children: [
{
label: "Sales Program",
selected: false,
children: [
{
label: "Commercial Dealer Fleet Program",
selected: false
},
{
label: "Courtesy Car Program",
selected: false
},
{
label: "VIP & Employee Purchase Program",
selected: false
},
{
label: "Policies",
selected: false
}
]
},
{
label: "Customer Rebate Programs",
selected: false,
children: [
{
label: "Commercial Dealer Fleet Program",
selected: false
},
{
label: "Courtesy Car Program",
selected: false
},
{
label: "VIP & Employee Purchase Program",
selected: false
},
{
label: "Policies",
selected: false
}
]
}
]
},
{
label: "Fleet",
selected: false
}
];
var app = angular.module('bin', ['ivh.treeview']);
app.config(function(ivhTreeviewOptionsProvider) {
ivhTreeviewOptionsProvider.set({
defaultSelectedState: false,
validate: true,
expandToDepth: -1
});
});
app.controller('DemoCtrl', function() {
this.stuff = stuff;
this.tpl = `
<div title="{{trvw.label(node)}}" >
<span ivh-treeview-toggle >
<span ivh-treeview-twistie>
</span>
</span>
<span ng-if="trvw.useCheckboxes()" ivh-treeview-checkbox >
</span>
<span class="ivh-treeview-node-label" ivh-treeview-toggle >
{{trvw.label(node)}}
</span>
<div ivh-treeview-children></div>
</div>`
this.customTreeViewOpts = {
// useCheckboxes: false
// twistieLeafTpl: ""
twistieExpandedTpl: '<span class="fas fa-minus-square"></span>',
twistieCollapsedTpl: '<span class="fas fa-plus-square"></span>',
twistieLeafTpl: '<span class="fas fa-minus-square" style=" visibility: hidden;"></span>'
// nodeTpl: "..."
// onToggle: this.awesomeCallback
};
});
2 answers
solution1
0 2019-07-06 18:50:06
One approach could be adding some padding to the node wrappers and adjust with a negative margin on the checkboxes contents. I added a wrapper (.tree-node-adjusted-wrapper) and a class to the outer div (.tree-node-adjusted). The approach is a bit of a hack and the px offsets could be calculated (ems or something) or otherwise derived from the font size.
Template
this.tpl = `
<div title="{{trvw.label(node)}}" class="tree-node-adjusted" >
<div class="tree-node-adjusted-wrapper">
<span ivh-treeview-toggle >
<span ivh-treeview-twistie>
</span>
</span>
<span ng-if="trvw.useCheckboxes()" ivh-treeview-checkbox >
</span>
<span class="ivh-treeview-node-label" ivh-treeview-toggle >
{{trvw.label(node)}}
</span>
</div>
<div ivh-treeview-children></div>
</div>`
The CSS (LESS in my Codepen example):
.ivh-treeview .tree-node-adjusted {
.tree-node-adjusted-wrapper {
padding-left: 40px;
& > span:nth-child(1) {
margin-left: -40px;
}
}
}
(another solution could be making the nodes relative position with some left padding, and absolute positioning the checkboxes – that may be more precise).
solution2
0 ACCPTED 2019-07-08 15:40:59
Try wrapping the twisty, checkbox, and label in a container with display:flex and leave the ivh-treeview-children directive as a sibling to that container.
Updated codepen: https://codepen.io/jtrussell/pen/qzQNdm?editors=0010
Updated node template snippet:
<div title="{{trvw.label(node)}}">
<div style="display:flex">
<span ivh-treeview-toggle >
<span ivh-treeview-twistie>
</span>
</span>
<span ng-if="trvw.useCheckboxes()" ivh-treeview-checkbox >
</span>
<span class="ivh-treeview-node-label" ivh-treeview-toggle>
{{trvw.label(node)}}
</span>
</div>
<div ivh-treeview-children></div>
</div>
Result Screenshot:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.