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
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. 
jQuery is not something that I have studied, so can
not help you with that. 
coothead
1 Like
The following responsive page could easily be hard-coded into three columns if you really wanted:
Edit:
Amended too enthusiastic predictive text. Note to self, always check results 
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.
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.
filter-tree-improved.zip (96.5 KB)
coothead
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.