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="" >
<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 >
</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
};
});
Aucun commentaire:
Enregistrer un commentaire