Breaking a list into columns

I have a list I am splitting up into 3 columns,
http://lukesspot.com/tree/simple_tree.html
It works great but how come the dropdown stuff goes into the next column and how do I get it to ignore that?

Hi there lurtnowski,

instead of CSS columns, try CSS flex…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>tree test</title>
<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
 /* use flex instead of unsuitable columns */
#container {
    display: flex;
    flex-wrap: wrap;
 }

 /* Remove default bullets */
.myUL, .myUL ul {
    list-style-type: none;
 }

/* Remove margins and padding from the parent ul */
.myUL {
    width: 33.333%;
    margin: 0;
    padding: 0;
 }

/* Style the caret/arrow */
.caret {
    cursor: pointer;
    user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    content: '\25B6';
    color: #000;
    display: inline-block;
    margin-right: 0.375em;
 }

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    transform: rotate( 90deg );
 }

/* Hide the nested list */
.nested {
    display: none;
 }

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
    display: block;
 } 
@media ( max-width: 35em ) {
.myUL {
    width: 50%;
  }
 }
@media ( max-width: 22em ) {
.myUL {
    width: 100%;
  }
 }

</style>
</head>
<body>

<div id="container">
<ul class="myUL">
  <li><span class="caret">ADMS</span>
    <ul class="nested">
     <li><a href="#0.1_adms-ancc">ANCC</a></li>
     <li><a href="#0.1_adms-ehf">EHF</a></li>
	</ul>
  </li>
  <li><span class="caret">ANCC</span>
    <ul class="nested">
     <li><a href="#0.1_ancc-adms">ADMS</a></li>
     <li><a href="#0.1_ancc-comsec">COMSEC</a></li>
	  <li><a href="#0.1_ancc-adms">ADMS</a></li>
	  <li><a href="#0.1_ancc-comsec">COMSEC</a></li>
	  <li><a href="#0.1_ancc-cots">COTS</a></li>
	  <li><a href="#0.1_ancc-ext">EXT</a></li>
	  <li><a href="#0.1_ancc-fcc">FCC-100</a></li>
	  <li><a href="#0.1_ancc-idnx">IDNX</a></li>
	  <li><a href="#0.1_ancc-ntwan">NTWAN</a></li>
	  <li><a href="#0.1_ancc-patching">PATCHING</a></li>
	  <li><a href="#0.1_ancc-piers">PIERS</a></li>
	  <li><a href="#0.1_ancc-ssr1_jtt">SSR1-JTT</a></li>
	  <li><a href="#0.1_ancc-unk">UNK</a></li>
	</ul>
  </li>
  <li><span class="caret">CND NIPR</span>
    <ul class="nested">
	  <li><a href="#cnd_nipr-cnd_sipr">CND SIPR</a></li>
	  <li><a href="#cnd_nipr-unk">UNK</a></li>
    </ul>
  </li>
  <li><span class="caret">CND SIPR</span>
    <ul class="nested">
	  <li><a href="#cnd_sipr-cnd_nipr">CND NIPR</a></li>
    </ul>
  </li>  
  <li><span class="caret">COMSEC</span>
    <ul class="nested">
     <li><a href="#comsec-ancc">ANCC</a></li>
     <li><a href="#comsec-disa">DISA</a></li>
     <li><a href="#comsec-ecos">ECOS</a></li>
     <li><a href="#comsec-ehf">EHF</a></li>
     <li><a href="#comsec-ext">EXT</a></li>
     <li><a href="#comsec-nmt">NMT</a></li>
     <li><a href="#comsec-patching">PATCHING</a></li>
     <li><a href="#comsec-piers">PIERS</a></li>
     <li><a href="#comsec-unk">UNK</a></li>
     <li><a href="#comsec-vtc">VTC</a></li>
    </ul>
  </li>
</ul>
<ul class="myUL">  								  
  <li><span class="caret">EHF</span>
    <ul class="nested">
     <li><a href="#ehf-adms">ADMS</a></li>
     <li><a href="#ehf-ancc">ANCC</a></li>
     <li><a href="#ehf-comsec">COMSEC</a></li>
     <li><a href="#ehf-ext">EXT</a></li>
     <li><a href="#ehf-fcc">FCC-100</a></li>
     <li><a href="#ehf-nmt">NMT</a></li>
     <li><a href="#ehf-unk">UNK</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">EXTERNAL</span>
    <ul class="nested">
     <li><a href="#external-ancc">ANCC</a></li>
     <li><a href="#external-comsec">COMSEC</a></li>
     <li><a href="#external-ehf">EHF</a></li>
     <li><a href="#external-legacy_rtms">LEGACY RTMS</a></li>
     <li><a href="#external-piers">PIERS</a></li>
     <li><a href="#external-rtms">RTMS</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">GPS TIMING</span>
    <ul class="nested">

     <li><a href="#gps-nmt">NMT</a></li>
     <li><a href="#gps-ntwan">NTWAN</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">NMT</span>
    <ul class="nested">
     <li><a href="#nmt-atip">ATIP</a></li>
     <li><a href="#nmt-comsec">COMSEC</a></li>
     <li><a href="#nmt-ehf">EHF</a></li>
     <li><a href="#nmt-gps">GPS TIMING</a></li>
     <li><a href="#nmt-idnx">IDNX</a></li>
     <li><a href="#nmt-ntwan">NTWAN</a></li>
     <li><a href="#nmt-patching">PATCHING</a></li>
     <li><a href="#nmt-unk">UNK</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">NTWAN</span>
    <ul class="nested">
     <li><a href="#ntwan-ancc">ANCC</a></li>
     <li><a href="#ntwan-gps">GPS TIMING</a></li>
     <li><a href="#ntwan-nmt">NMT</a></li>
     <li><a href="#ntwan-unk">UNK</a></li>								  
    </ul>
  </li> 
</ul>
<ul class="myUL">  								  
  <li><span class="caret">PIERS</span>
    <ul class="nested">
     <li><a href="#piers-ancc">ANCC</a></li>
     <li><a href="#piers-apts">APTS</a></li>
     <li><a href="#piers-comsec">COMSEC</a></li>
     <li><a href="#piers-drrs">DRRS</a></li>
     <li><a href="#piers-ext">EXT</a></li>
     <li><a href="#piers-unk">UNK</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">EHF</span>
    <ul class="nested">
     <li><a href="#rtms-ext">EXT</a></li>
     <li><a href="#rtms-legacy_rtms">LEGACY RTMS</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">SCIP IWF INC II</span>
    <ul class="nested">  
     <li><a href="#scip_iwf_inc_ii-patching">PATCHING</a></li>							  
    </ul>
  </li>  								  
  <li><span class="caret">SCIP IWF INC III</span>
    <ul class="nested">
     <li><a href="#scip_iwf_inc_iii-scip_iwf_inc_ii">SCIP-IWF INC II</a></li>
     <li><a href="#scip_iwf_inc_iii-unk">UNK</a></li>
    </ul>
  </li>  								  
  <li><span class="caret">SSR-1 JTT</span>
    <ul class="nested">
     <li><a href="#ssr-ancc">ANCC</a></li>								  
    </ul>
  </li>
</ul> 
<!--#container --></div>

<script>
(function( d ) {
   'use strict';
   var i, toggler = d.getElementsByClassName( 'caret' );
      for ( i = 0; i < toggler.length; i ++ ) {
            toggler[ i ].addEventListener( 'click', 
               function() {
                   this.parentElement.querySelector(".nested").classList.toggle( 'active' );
                   this.classList.toggle( 'caret-down' );
                 }, false );
         } 
}( document ));
</script>

</body>
</html>

coothead

1 Like

Online demo:

https://johns-jokes.com/downloads/sp-j/sp-unzip/_crud.php?zipname=Css-list-view.zip

2 Likes

thanks, am trying to do that to this list generated by javascript,
http://lukesspotcom.fatcow.com/tree/filter_tree.html

Hi there lurtnowski,

I can get it into three columns…

<!DOCTYPE HTML>
<html lang="en">
<head>

<base href="http://lukesspotcom.fatcow.com/tree/">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Filter_Tree</title>

<link rel="stylesheet" href="css/filter_tree.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

h1 {
    font-size: 1em;
 }

#container {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
 }

#container > div  {
    width: 32.833%;
    padding: 0;
    margin: 0 0.25% 0.25em 0.25%;
    background-color: #fff;
 }

#container > div > ul{
   margin: 0;
 }

#container > div:nth-of-type(2) div > ul,
#container > div:nth-of-type(3) div > ul{
    padding-top: 3.1em;
 }

#container > div:nth-of-type(2) form ,
#container > div:nth-of-type(3) form {
    display: none;  
 }

form input {
   box-sizing: border-box;
   border:solid #999;
   border-width: 0 0 1px 0;
 }

@media ( max-width:39em ) {
#container > div  {
    width: 49.5%;
  }
 }

@media ( max-width:29em ) {
#container > div  {
    width: 99.5%;
  }
 }
</style>
</head>
<body>

 <h1>Systems <small>15</small></h1>

 <hr>

 <div id="container">
  <div class="be_tree"></div>
  <div class="be_tree1"></div>
  <div class="be_tree2"></div>
 </div>

 <script src="js/jquery.js"></script>
 <script src="js/filter_tree.js"></script>
 <script>
    $(document).ready(function () {
       var tree = [
          {id: 1, parent_id: 0, name: "ADMS"},
          {id: 2, parent_id: 1, name: "<a href=#adms-ancc>ANCC</a>"},
          {id: 3, parent_id: 1, name: "<a href=#adms-ehf>EHF</a>"},
          {id: 4, parent_id: 0, name: "ANCC"},
          {id: 5, parent_id: 4, name: "<a href=#ancc-adms>ADMS</a>"},
          {id: 6, parent_id: 4, name: "<a href=#ancc-adms>COMSEC</a>"},
          {id: 7, parent_id: 4, name: "<a href=#ancc-cots>COTS</a>"},
          {id: 8, parent_id: 4, name: "<a href=#ancc-ext>EXTERNAL</a>"},
          {id: 9, parent_id: 4, name: "<a href=#ancc-fcc>FCC-100</a>"},
          {id: 10, parent_id: 4, name: "<a href=#ancc-idnx>IDNX</a>"},
          {id: 11, parent_id: 4, name: "<a href=#ancc-ntwan>NTWAN</a>"},
          {id: 12, parent_id: 4, name: "<a href=#ancc-patching>PATCHING</a>"},
          {id: 13, parent_id: 4, name: "<a href=#ancc-piers>PIERS</a>"},
          {id: 14, parent_id: 4, name: "<a href=#ancc-ssr>SSR-1 JTT</a>"},
          {id: 15, parent_id: 4, name: "<a href=#ancc-unk>UNK</a>"},
          {id: 16, parent_id: 0, name: "CND NIPR"},
          {id: 17, parent_id: 16, name: "<a href=#cnd_nipr-cnd_sipr>CND SIPR</a>"},
          {id: 18, parent_id: 16, name: "<a href=#cnd_nipr-unk>UNK</a>"},
          {id: 19, parent_id: 0, name: "CND SIPR"},
          {id: 20, parent_id: 19, name: "<a href=#cnd_sipr-cnd_nipr>CND NIPR</a>"},
          {id: 21, parent_id: 0, name: "COMSEC"},
          {id: 22, parent_id: 21, name: "<a href=#comsec-ancc>ANCC</a>"},
          {id: 23, parent_id: 21, name: "<a href=#comsec-disa>DISA</a>"},
          {id: 24, parent_id: 21, name: "<a href=#comsec-ehf>EHF</a>"},
          {id: 25, parent_id: 21, name: "<a href=#comsec-ext>EXTERNAL</a>"},
          {id: 22, parent_id: 21, name: "<a href=#comsec-nmt>NMT</a>"},
          {id: 23, parent_id: 21, name: "<a href=#comsec-patching>PATCHING</a>"},
          {id: 24, parent_id: 21, name: "<a href=#comsec-piers>PIERS</a>"},
          {id: 25, parent_id: 21, name: "<a href=#comsec-unk>UNK</a>"},
          {id: 25, parent_id: 21, name: "<a href=#comsec-vtc>VTC</a>"} ]
       var tree1 = [
          {id: 26, parent_id: 0, name: "EHF"},
          {id: 27, parent_id: 26, name: "<a href=#ehf-adms>ADMS</a>"},
          {id: 28, parent_id: 26, name: "<a href=#ehf-ancc>ANCC</a>"},
          {id: 29, parent_id: 26, name: "<a href=#ehf-comsec>COMSEC</a>"},
          {id: 30, parent_id: 26, name: "<a href=#ehf-ext>EXTERNAL</a>"},
          {id: 28, parent_id: 26, name: "<a href=#ehf-fcc>FCC-100</a>"},
          {id: 29, parent_id: 26, name: "<a href=#ehf-nmt>NMT</a>"},
          {id: 30, parent_id: 26, name: "<a href=#ehf-unk>UNK</a>"},
          {id: 31, parent_id: 0, name: "EXTERNAL"},
          {id: 32, parent_id: 31, name: "<a href=#ext-ancc>ANCC</a>"},
          {id: 33, parent_id: 31, name: "<a href=#ext-comsec>COMSEC</a>"},
          {id: 34, parent_id: 31, name: "<a href=#ext-legacy-rtms>LEGACY RTMS</a>"},
          {id: 35, parent_id: 31, name: "<a href=#ext-piers>PIERS</a>"},
          {id: 36, parent_id: 31, name: "<a href=#ext-rtms>RTMS</a>"},
          {id: 37, parent_id: 0, name: "GPS TIMING"},
          {id: 38, parent_id: 37, name: "<a href=#gps-nmt>NMT</a>"},
          {id: 39, parent_id: 37, name: "<a href=#gps-ntwan>NTWAN</a>"},          
          {id: 40, parent_id: 0, name: "NMT"},
          {id: 41, parent_id: 40, name: "<a href=#nmt-atip>ATIP</a>"},
          {id: 42, parent_id: 40, name: "<a href=#nmt-comsec>COMSEC</a>"},   
          {id: 43, parent_id: 40, name: "<a href=#nmt-ehf>EHF</a>"},
          {id: 44, parent_id: 40, name: "<a href=#nmt-gps>GPS TIMING</a>"},   
          {id: 45, parent_id: 40, name: "<a href=#nmt-idnx>IDNX</a>"},
          {id: 46, parent_id: 40, name: "<a href=#nmt-ntwan>NTWAN</a>"},   
          {id: 47, parent_id: 40, name: "<a href=#nmt-patching>PATCHING</a>"},
          {id: 48, parent_id: 40, name: "<a href=#nmt-unk>UNK</a>"},   
          {id: 49, parent_id: 0, name: "NTWAN"},
          {id: 50, parent_id: 50, name: "<a href=#ntwan-ancc>ANCC</a>"},
          {id: 51, parent_id: 50, name: "<a href=#ntwan-gps>GPS TIMING</a>"},   
          {id: 52, parent_id: 50, name: "<a href=#ntwan-nmt>NMT</a>"},
          {id: 53, parent_id: 50, name: "<a href=#ntwan-unk>UNK</a>"} ]
       var tree2 = [
          {id: 54, parent_id: 0, name: "PIERS"},
          {id: 55, parent_id: 54, name: "<a href=#piers-ancc>ANCC</a>"},
          {id: 56, parent_id: 54, name: "<a href=#piers-apts>APTS</a>"},   
          {id: 57, parent_id: 54, name: "<a href=#piers-comsec>COMSEC</a>"},
          {id: 58, parent_id: 54, name: "<a href=#piers-drrs>dRRS</a>"},
          {id: 59, parent_id: 54, name: "<a href=#piers-ext>EXTERNAL</a>"},   
          {id: 60, parent_id: 54, name: "<a href=#piers-unk>UNK</a>"},
          {id: 63, parent_id: 0, name: "RTMS"},
          {id: 64, parent_id: 63, name: "<a href=#rtms-ext>EXTERNAL</a>"},   
          {id: 65, parent_id: 63, name: "<a href=#rtms-legacy_rtms>LEGACY RTMS</a>"},   
          {id: 66, parent_id: 0, name: "SCIP IWF INC II"},
          {id: 67, parent_id: 66, name: "<a href=#scip_iwf_inc_ii-patching>PATCHING</a>"},   
          {id: 68, parent_id: 0, name: "SCIP IWF INC III"},
          {id: 69, parent_id: 68, name: "<a href=#scip_iwf_inc_iii-scip_iwf_inc_ii>SCIP IWF INC II</a>"},   
          {id: 70, parent_id: 68, name: "<a href=#scip_iwf_inc_iii-unk>UNK</a>"},   
          {id: 71, parent_id: 0, name: "SSR-1 JTT"},
          {id: 72, parent_id: 71, name: "<a href=#ssr-ancc>ANCC</a>"}				
				];

				
       var params = [{
         data: tree,
         filter: true,
         open_close: false,
         closed: 'closed',
         opened: 'opened',
         nochild: 'nochild',
         selected: 'selected',
         m_select: false,
         col_ex: true,
         width: 'auto',
         height: 'auto',
         color: '#42066d'
         }];

       var params1= [{
         data: tree1,
         filter: true,
         open_close: false,
         closed: 'closed',
         opened: 'opened',
         nochild: 'nochild',
         selected: 'selected',
         m_select: false,
         col_ex: true,
         width: 'auto',
         height: 'auto',
         color: '#42066d'
         }];

       var params2= [{
         data: tree2,
         filter: true,
         open_close: false,
         closed: 'closed',
         opened: 'opened',
         nochild: 'nochild',
         selected: 'selected',
         m_select: false,
         col_ex: true,
         width: 'auto',
         height: 'auto',
         color: '#42066d'
         }];


       $('.be_tree').filterTree(params);
       $('.be_tree1').filterTree(params1);
       $('.be_tree2').filterTree(params2);
          
     });
 </script>
</body>
</html>

…but the “Search” thing works rather strangely. :wonky:

jQuery is not something that I have studied, so can
not help you with that. :winky:

coothead

1 Like

The following responsive page could easily be hard-coded into three columns if you really wanted:

https://www.johns-jokes.com/all-the-jokes

Edit:
Amended too enthusiastic predictive text. Note to self, always check results :slight_smile:

1 Like

ok, im tryng to understand this to be sure
I have a list like

<div id="container">
<ul id="list">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

then, to make it span 3 columns add these styles

#container {
    display: flex;
    flex-wrap: wrap;
 }
#list {
    width: 33.333%;
    margin: 0;
    padding: 0;
 }

Hi there lurtnowski,

I believe that I have now fully resolved all the problems. :winky:

Check out the attachment and take a peep…

filter-tree.zip (96.0 KB)

coothead

Hi there lurtnowski,

I have now revised the code so that the items always stay
in the correct order when the page width is reduced. :winky:

filter-tree-improved.zip (96.5 KB)

coothead