HTML/CSS Checkbox text alignment with <span> or <div>

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

Current View

Desired View

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" rel="nofollow noreferrer noopener"
      integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
      crossorigin="anonymous"
    />
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview.css" rel="nofollow noreferrer noopener">
  <link rel="stylesheet" href="//rawgit.com/iVantage/angular-ivh-treeview/master/dist/ivh-treeview-theme-basic.css" rel="nofollow noreferrer noopener">
</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
  };
});

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

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:

enter image description here

Solution 2

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;
    }
  }
}

See example in Codepen

(another solution could be making the nodes relative position with some left padding, and absolute positioning the checkboxes – that may be more precise).

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply