I put together a treeview control with HTML and CSS, that can display the nodes as an Org chart or a classic treeview list.
In the CodePen, each node has a set width: 100px.
How can I fit the content of the div (using display: inline-block for example), but keep the layout of the chart as it is?
The layout of the tree as you see it is exactly as I want it, apart from the set width. When I tried to replace width: 100px with display: inline-block, the layout changes completely and whatever I tried only made it worse.
As for the layout:
org-view: If a node is directly within a red rectangle box, is children should
be displayed horizontally (eg: A, F, M and N are horizontally
displayed under Root Node). The parent node is centered in the middle of its first and last child (Root Node is centered in the middle of A and N)
list-view: If a node is directly within a green rectangle box, its children will appear below, vertically.
HTML:
<head>
<meta charset="UTF-8" />
<title>Hierarchy Chart</title>
</head>
<link rel="stylesheet" href="hierarchy-chart.css">
<body>
<div class="wbs">
<ol class="org-view">
<li>
<div class="node" for="node-1">1. Root node</div>
<input type="checkbox" checked id="node-1" />
<ol class="list-view">
<li>
<div class="node" for="node-1-1">AAAA</div>
<input type="checkbox" checked id="node-1-1" />
<ol class="list-view">
<li>
<div class="node">BBBB</div>
</li>
</ol>
<ol class="org-view">
<li>
<div class="node" for="node-1-1-2">CCCC</div>
<input type="checkbox" checked id="node-1-1-2" />
<ol class="list-view">
<li>
<div class="node">DDDD</div>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">EEEE</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol class="org-view">
<li>
<div class="node" for="node-1-2">FFFF</div>
<input type="checkbox" checked id="node-1-2" />
<ol class="list-view">
<li>
<div class="node" for="node-1-2-1">GGGG</div>
<input type="checkbox" checked id="node-1-2-1" />
<ol>
<li>
<div class="node">HHHH</div>
</li>
<li>
<div class="node">IIII</div>
</li>
</ol>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node" for="node-1-2-2">JJJJ</div>
<input type="checkbox" checked id="node-1-2-2" />
<ol>
<li>
<div class="node">KKKK</div>
</li>
<li>
<div class="node">LLLL</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">MMMM</div>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">NNNN</div>
</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
CSS
body {background-color: white;}
.wbs {
display: grid;
border: 4px solid #eee;
position: relative;
}
.wbs ol {
list-style-type: none;
padding-left: 10px;
}
.org-view {
border: 1px dashed red;
margin: auto;
}
.org-view >li > .node:first-child {
margin-left: auto;
margin-right: auto;
}
.list-view {
border: 1px dashed lightgreen;
vertical-align: top;
}
/* Tree view collapsible functionalities */
.wbs input {
//display: none;
}
.wbs input ~ ol {
display: none;
}
.org-view >li > .node:first-child {
margin-left: auto;
margin-right: auto;
}
.org-view > li > input:checked ~ ol {
display: inline-block;
}
.org-view .list-view input:checked ~ ol {
display: block;
}
.org-view .org-view input:checked ~ ol {
display: inline-block;
}
.node {
margin-top: 10px;
}
.node {
color: blue;
position: relative;
background-color: white;
border-radius: 3px;
border: 2px solid #4285F4;
//display: inline-block;
width: 100px;
padding: 4px;
vertical-align: top;
}
To me it seems fine.
If you want the nodes to cause a line break, you could wrap them within a <div> element, so they would have a block element breaking the lines.
Also, you might wanna center them.
Here's a fork of your CodePen: https://codepen.io/anon/pen/jYdEro?editors=1100#
Had only the first nodes. I'm too lazy to actually do the entire thing - but you'll get the point :)
Some explanation:
Added a new wrapper element for each node element named node-wrapper. The default display for <div> elements is block so that takes care of the line breaks. The styles for that element:
.node-wrapper {
text-align: center;
}
Since the node element is inline-block, we can center it by using text-align on the parent element.
Related
I have been tasked with styling a website, where I have encountered a hurdle regarding the horizontal alignment of elements inside list items.
I have replicated the structure of the menu in question with this JSFiddle.
I want to know how I can keep the position of the green divs (as shown from the start) when I expand the menu, using the button in the fiddle. I need them to keep horizontal alignment with the first <a> element in their respective <li> element, when the submenus are displayed.
you can do it like this for example:
<html>
<script>
function clickFunction(){
var elements = document.getElementsByClassName("submenu");
for(var i = 0; i < elements.length; i++){
elements[i].classList.toggle("display-sublist");
}
}
</script>
<style>
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul li{
width: 100%;
background-color: blue;
}
.submenu{
display: none;
}
.display-sublist{
display: block;
}
ul li a{
width: 95%;
background-color: red;
}
.main-test {
display: inline-block;
float: left;
width: 90%;
}
.cancel-test{
display: inline-block;
background-color: green;
float: right;
width: 10%;
}
.expand-button{
clear: both;
display: block;
}
</style>
<body>
<ul>
<li>
<a class="main-test" href="#">Something</a>
<a class="cancel-test">x</div>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
<a class="main-test"href="#">Something</a>
<a class="cancel-test">x</a>
<ul class="submenu">
<li>
Sub-Something
</li>
<li>
Sub-Something
</li>
</ul>
</li>
<li>
Something
</li>
<li>
Something
</li>
</ul>
<button onclick="clickFunction()" class="expand-button">Expand</button>
</body>
</html>
I'm trying to figure out how to position a flowchart built with ul list growing like a tree, from bottom-up.
It's a genealogical family tree. I've made it from top down using this great code here but I want the first element in the bottom, above it the parents and above it the grandparents and so on...
Here is the code:
HTML
<div class="tree">
<ul>
<li>
<div class="dados_membro">Me</div>
<ul>
<li>
<div class="dados_membro">Father</div>
<ul>
<li>
<div class="dados_membro">Grandfather</div>
</li>
<li>
<div class="dados_membro">Grandmother</div>
</li>
</ul>
</li>
<li>
<div class="dados_membro">Mother</div>
<ul>
<li>
<div class="dados_membro">Grandfather</div>
</li>
<li>
<div class="dados_membro">Grandmother</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.tree ul {
padding-top: 20px;
position: relative;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 39px 5px 0 5px;
}
.dados_membro {
border: 1px solid;
border-radius: 20px;
width: 300px;
margin: auto;
text-align:left;
padding:10px
}
I'm testing some rules in this fiddle and could position the first node "Me" in the bottom and the other ones up with the CSS bellow, but all the nodes in the same level (parents, grandparents and so on..) get pilled up.
.tree ul {
position: absolute;
bottom:0;
}
.tree ul li ul{
position:relative;
}
.tree li {
float: right;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
margin-top:-120px
}
.dados_membro {
border: 1px solid;
border-radius: 5px;
width: 100px;
margin: auto;
text-align:left;
padding:10px
}
I don't know how big will the tree grow up nor if all the nodes will have elements. Can't use javascript for this. Any ideas?
You could change the order of the elements using the flexbox property flex-direction: column-reverse, if that is an option for your project (see compatibility table).
To revert the order of the list I gave the main container position: absolute with bottom:0, the <ul>s a position:relative and all <li>s position:absolute with bottom:50px, except for the first level that I want to be in the bottom of the container.
This way every <li> is positioned 50px above its parent <ul> that has relative position.
One last tweak to achieve the tree style was adding a class for female and male parents in order to position each one in the left and in the right above its child node. Since I'm generating this tree dinamically I can count how many levels does the tree has and calculate the distance between father/mother nodes. If I could not control the html dinamically, I would need to use javascript to count the nodes and apply the css rules on the fly (maybe I will do ti in the future, just to animate the tree generation).
The new code is here
HTML
<div class="tree">
<ul>
<li>
<div class="dados_membro">Me</div>
<ul>
<li class="f1">
<div class="dados_membro">Father</div>
<ul>
<li class="f2">
<div class="dados_membro">Grandfather f</div>
</li>
<li class="m2">
<div class="dados_membro">Grandmotherf </div>
</li>
</ul>
</li>
<li class="m1">
<div class="dados_membro">Mother</div>
<ul>
<li class="f2">
<div class="dados_membro">Grandfather m</div>
</li>
<li class="m2">
<div class="dados_membro">Grandmother m</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS
.tree {
position:absolute;
bottom: 0;
left:300px
}
.tree ul {
position: relative;
list-style:none;
}
.tree ul li ul li{
position: absolute;
bottom: 50px;
}
.f1{
left:-150px;
}
.m1 {
left:150px;
}
.f2{
left:-80px;
}
.m2 {
left:80px;
}
.dados_membro {
border: 1px solid;
border-radius: 5px;
width: 100px;
margin: auto;
text-align:left;
padding:10px
}
The layout I want to achieve is the following, one large image with a gallery of four thumbnails below it:
I'm using a Javascript gallery to actually display a full screen gallery, activated when clicking on this element.
The problem is that the gallery script expects the images as direct children in an unordered list, all of them including the one that is the big image in my layout:
<ul>
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
The first <li> is the big image, all the others are small thumbnails.
Is there a way to achive my desired layout while still having all the images in the unordered list? If I could break up the list this would be easy, but that wouldn't be recognized by the gallery script anymore.
Is it possible to achive this layout without changing the underlying structure of the list?
I suggest using float: left and display: block on li, and float: none on li:first-child:
ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
li
{
margin: 2px 5px;
display: block;
float: left;
}
li:first-child
{
float: none;
}
<ul>
<li>
<img src="http://lorempixel.com/g/430/430/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
<li>
<img src="http://lorempixel.com/g/100/100/" />
</li>
</ul>
Simple and clean, no JS involved.
This is my attempt based on flexbox. The skewed images are a side effect of taking random cat images from the web, and constraining them to a certain width and height (fiddle).
The CSS:
ul {
padding: 0;
margin: 0;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
li {
/** add box-sizing: border-box; if you include padding or borders **/
}
li:first-child {
width: 100%;
height: 500px;
}
li:not(:first-child) {
/** add box-sizing: border-box; if you include padding or borders **/
width: 25%; /** use calc if you include margins **/
height: 100px; /** whatever height you want **/
}
li > img { /** demo only - because of image sizes **/
width: 100%;
height: 100%;
}
The HTML:
<ul>
<li data-src="whatever">
<img src="http://www.gordonrigg.com/the-hub/wp-content/uploads/2015/06/little_cute_cat_1920x1080.jpg" />
</li>
<li data-src="whatever">
<img src="http://rufflifechicago.com/wp-content/uploads/cat-treats.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" />
</li>
<li data-src="whatever">
<img src="http://animalia-life.com/data_images/cat/cat8.jpg" />
</li>
<li data-src="whatever">
<img src="http://www.catprotection.com.au/wp-content/uploads/2014/11/5507692-cat-m.jpg" />
</li>
</ul>
You are looking for some simple CSS, there are multiple ways to approach this, the easiest is likely:
<style type="text/css">
ul.thumbs li{
float:right;
}
</style>
<ul class="thumbs">
<li data-src="img1.jpg">
<img src="thumb1.jpg" />
</li>
<li data-src="img2.jpg">
<img src="thumb2.jpg" />
</li>
</ul>
you could also set the ul to display:table-row and the lis to display:table-cell which would allow them to evenly spread and fill the space allowed in the ul
Based on your edit you will need something a little more complicated, without knowing which plugin you are using, or how it works, you can try this approach (uses a little jQuery):
$(document).ready(function(){
$('li').click(function(){
$(this).parent().find('.selected').removeClass('selected');
$(this).addClass('selected');
});
});
ul{
padding-top:405px;
position:relative;
}
li{
height:100px;
width:100px;
float:left;
background:blue;
}
li.selected{
background: red;
position: absolute;
top: 0;
height: 400px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
<li class="selected">test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
I have the following code to show a division on hover. It is initially hidden and i'm trying to show one division on hover of another element.
.topNav {
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu {
list-style-type: none;
}
.mainMenu li {
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a {
text-decoration: none;
color: white;
}
#item1 {
display: block;
}
#item1:hover #item1detail {
background: #444;
visibility: visible;
}
#item1detail {
position: absolute;
top: 152px;
left: 250px;
background: #ccc;
width: 750px;
height: 400px;
border: solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" href=""> item 1</a>
</li>
<li> item 3
</li>
<li> item 4
</li>
<li> item 5
</li>
<li> item 6
</li>
<li> item 7
</li>
<li> item 8
</li>
<li> item 9
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>
on hover of the list item item1 i want to show the division itemdetail. The above code is not working. What am i doing wrong?
As I see it the only solution to display the given div without touching the HTML would be Javascript... As the others suggested already...
BUT... there's a solution with one slight change to your HTML and CSS each.
The main problem is this CSS-selector:
#item1:hover #item1detail
which would translate to "id item1detail INSIDE of an hovered id item1".
You can fix this by placing the div inside of the li and change the selector to:
#item1:hover + #item1detail
Since the div is positioned absolute anyway it doesn't make a visual difference... at least for your snippet...
Updated version of your snippet:
.topNav
{
padding: 1px 15%;
background: #006cb4;
color: white;
}
.mainMenu
{
list-style-type: none;
}
.mainMenu li
{
display: inline-block;
padding: 3px 15px;
font-size: 20px;
}
.mainMenu li a
{
text-decoration: none;
color: white;
}
#item1
{
display: block;
}
#item1:hover + #item1detail
{
background: #444;
visibility: visible;
}
#item1detail
{
position: absolute;
top: 152px;
left: 250px;background: #ccc;
width: 750px;
height: 400px;
border:solid 1px black;
border-radius: 0 0 10px 10px;
visibility: hidden;
}
<div class="topNav">
<ul class="mainMenu">
<li >
<a id="item1" href=""> item 1</a>
<div id="item1detail">
Some random content
</div>
</li>
<li> item 3</li>
<li> item 4</li>
<li> item 5</li>
<li> item 6</li>
<li> item 7</li>
<li> item 8</li>
<li> item 9</li>
</ul>
</div>
You'll have to use javascript
<script>
function myFunction() {
if (document.getElementById("item1detail").hidden==false){
document.getElementById("item1detail").hidden = true;
}else{
document.getElementById("item1detail").hidden = false;
}
}
</script>
and
<div class="topNav">
<ul class="mainMenu">
<li><a id="item1" onhover="myFunction()" href=""> item 1</a>
</li>
<li> item 3
</li>
<li> item 4
</li>
<li> item 5
</li>
<li> item 6
</li>
<li> item 7
</li>
<li> item 8
</li>
<li> item 9
</li>
</ul>
<div id="item1detail">
Some random content
</div>
</div>
I would do that using jQuery.
$('#item1').hover(function(){
$('#item1detail').show();
}, function(){
$('#item1detail').hide();
});
The reason your CSS isn't working is because you're using this selector:
#item1:hover #item1detail
Which selects the element with id #item1detail occurring within the element with id #item1, if the #item1 element is hovered.
In your current markup, #item1detail is outside #item1, and so does not match the selector. Moving #item1detail should get you the behavior you want. (And there will probably be some layout work to do from that point.)
The #item1detail element is not a sibling of the #item1 element, so that is why the #item1:hover #item1detail CSS rule does not apply as you expect it to.
I believe if this is to work with CSS only (not JavaScript), then you will have to make #item1detail a sibling of #item1.
I have got a menu list:
<ul>
<li class="marked">First item</li>
<li>Second much longer than first item</li>
</ul>
I would like to have an image marker on top of item.marked which width will be 100% of text width. The image must stretch so it will be completely visible. Height is constant.
Can this be done with CSS and IE compatibility?
<style type="text/css">
.selected {
background:url("example.png") no-repeat 0 100%;
}
</style>
Solutions for changing background of list item (can be adapted to change an image):
1. CSS-only, persistent, works for current versions of browsers (doesn't work for IE8 and older) - DEMO.
HTML:
<ul>
<li>
<input type="radio" name="s" id="o1" checked>
<label for="o1">First item</label>
</li>
<li>
<input type="radio" name="s" id="o2">
<label for="o2">Second much longer than first item</label>
</li>
</ul>
Relevant CSS:
ul input[type=radio] {
display: none;
}
input[type=radio]:checked + label {
background: lightblue;
}
If you want to have an image (with img tag) above the selected items, then you can adapt it like in this demo.
HTML:
<ul>
<li>
<input type="radio" name="s" id="o1" checked>
<label for="o1">First item
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
</label>
</li>
<li>
<input type="radio" name="s" id="o2">
<label for="o2">Second much longer than first item
<img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
</label>
</li>
</ul>
And add the following CSS:
label img {
top: 0;
width: 100%;
height: 100%;
display: none;
position: absolute;
}
input[type=radio]:checked + label img {
display: block;
}
If you don't want to do it with an img tag, then you can use a background-image on a pseudo-element and set the background-size to 100% 100%, like in this demo. The HTML is the same as in the first demo and you need to also have this in the CSS:
label {
position: relative;
}
input[type=radio]:checked + label:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
background: url(http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg);
background-size: 100% 100%;
content: '';
}
2. CSS-only, not persistent (list item does not stay selected when you click somewhere else on the page), works for IE8 (and also IE7, but you have to hover off the text to see the change) - DEMO.
HTML:
<ul>
<li>First item</li>
<li>Second much longer than first item</li>
</ul>
Relevant CSS:
a:active, a:focus {
outline: none;
background: lightblue;
}