I'm creating inline LIs and would like their height to be similar. The problem here is that when one of my LI has a long text, this LI will have a bigger height and the others don't adjust. (I'm using bootstrap to create my rows)
http://jsfiddle.net/q5stk2yp/ (live example)
And HTML code:
<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
<ul style="border:1px solid" class="row table-row">
<li style="width:200px" class="table-cell">title 1</li>
<li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
<li class="table-cell">title 3</li>
<li class="table-cell">title 4</li>
</ul>
<ul style="border:1px solid" class="row table-row">
<li class="table-cell">test 1</li>
<li class="table-cell">test 2</li>
<li class="table-cell">test 3</li>
<li class="table-cell">test 4</li>
</ul>
</div>
One way to do this is with jQuery.
Here is the jsfiddle: http://jsfiddle.net/oe4g2etw/6/
And here is the JS code you'll need:
// During the first load...
// Find the max height of the elements...
var maxHeight = Math.max.apply(null, $(".table-custom li").map(function (){
return $(this).height();
}).get());
// And set all the list elements to that max height
$(".table-custom li").css('height', maxHeight);
If you want to also make it responsive you need to add a listener that checks for the window width change, then recalculates the height of the tallest element and sets it to all your list items:
// When the window is resized...
$( window ).resize(function() {
// Remove the 'height' attribute...
$(".table-custom li").css("height", "");
// Find the max height of the elements...
var maxHeight = Math.max.apply(null, $(".table-custom li").map(function (){
return $(this).height();
}).get());
// And set it to all the elements
$(".table-custom li").css('height', maxHeight);
});
Hope this helps!
PS: Don't forget to include jQuery in your <head> if you haven't already done so.
You can make elements match their tallest sibling's height by using display: table-cell.
This should work in IE8+ and all other browsers:
.table-custom {
min-width: 200px;
}
.table-row {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
.table-custom > ul > li {
text-align: left;
padding: 0px;
padding-left: 5px;
padding-top: 8px;
padding-bottom: 7px;
display: table-cell;
border: 1px solid #f00;
margin-bottom: 0px;
}
<div class="col-md-12 col-sm-12 col-xs-12 table-custom">
<ul style="border:1px solid" class="row table-row">
<li style="width:200px" class="table-cell">title 1</li>
<li style="width:20%" class="table-cell">Name with very long description to create multiple lines and show what I would like to to.</li>
<li class="table-cell">title 3</li>
<li class="table-cell">title 4</li>
</ul>
<ul style="border:1px solid" class="row table-row">
<li class="table-cell">test 1</li>
<li class="table-cell">test 2</li>
<li class="table-cell">test 3</li>
<li class="table-cell">test 4</li>
</ul>
</div>
Related
I'm trying to create a mega-menu. I'm using a list element and some elements have divs inside.
This is what my HTML looks like:
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
The li with .list-item class has position:relative; and the .sub-menu-wrapper has position:absolute; and width:100%;
i need the .sub-menu-wrap to have a full screen width but it's only taking the li.list-item width (screenshot below).
I also tried left:0;right:0; for .sub-menu-wrap but nothing changed..
When recreating your code, the element positioned absolute does in fact take up 100% width when the width is set to 100%. Double check your syntax. See my snippet below, the element positioned absolute is taking up the full width.
.list-item{
position: relative;
background: lightcoral;
width: 100px;
}
.sub-menu-wrap{
position:absolute;
background-color: lightblue;
width: 100vw;
}
<li class="list-item">
Marchés
<div class="sub-menu-wrap">
<ul class="sub-menu">
<li>Marché 1</li>
<li>Marché 2</li>
<li>Marché 3</li>
<li>Marché 4</li>
<li>Marché 5</li>
<li>Marché 6</li>
</ul>
</div>
</li>
I have a web page that displays a list of item with variable length. There are two panels at the top of the page that display information about the selected item from the list. Both or just one can be hidden by the user to see more items in the list. If the panels are displayed, I need them to be fixed - even when scrolling through the list, they are always visible. If the user hides some panels, I want the list of items to move to the area where the fixed panel was.
The situation is shown in the picture. The green and yellow panels must always be seen until the user hides it. The list must move according to space above.
Is there a possibility to do this with HTML and CSS?
Yes. You can put your list inside a div and set the div to have a fixed height as well, then the items below will be scrollable.
See this example (jsfiddle):
.panel-1, .panel-2{
height: 100px;
}
.panel-1{
background: red;
}
.panel-2{
background: blue;
}
.list{
height: 200px;
overflow-y: auto;
}
.list-group{
background: rgba(0, 0, 0, 0.1);
list-style: none;
padding-left: 0;
}
.list-item{
margin: 5px 0;
padding: 5px 0;
background-color: yellow;
}
<div>
<div class="panel-1">Information</div>
<div class="panel-2">More information</div>
<div class="list">
<ul class="list-group">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
<li class="list-item">Item 5</li>
<li class="list-item">Item 6</li>
<li class="list-item">Item 7</li>
<li class="list-item">Item 8</li>
<li class="list-item">Item 9</li>
<li class="list-item">Item 10</li>
</ul>
</div>
</div>
I want to have my Bootstrap tabs flush with my page header (mock shown below), but having the header taller than the other tabs causes everything to break. How can I do this?
<ul class="nav nav-tabs" role="tablist">
<li><h1>Header</h1></li>
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li class="pull-right"><button id="new-thing" class="btn btn-primary">New</button></li>
</ul>
Here is the font size and margin spacing I want. Now I just need the tabs flush with the bottom border.
http://jsfiddle.net/bK4a4/4/
Delete margin
li h1 { margin: 0}
After Edit Options
add margin-top to other elements. fiddle
add line-height to h1 fiddle
Try adding this to your CSS:
.nav-tabs h1 {
font-size: 20px !important;
margin-top: 10px !important;
margin-right: 5px !important;
}
You can change the font size, weight and margins to fit your needs.
in your html , make a class for the header
<li><h1 class="header">Header</h1><li>
and in your csss
html, body {
padding: 1em;
}
.header {
margin:0;
padding:0;
padding-right:10px;
}
Here is the jsfiddle to check it out : jsFiddle Sample
How about something like that:
<ul class="nav nav-tabs" role="tablist">
<li><div style=" font-size:25px">Header  </div></li>
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li class="pull-right"><button id="new-thing" class="btn btn-primary">New</button></li></ul>
where you use inline css to specify the font size and margin
at the moment, i am using the selectable JQUERY function
<style>
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
</style>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
but for some reason, when i select an element, the color will not change to bright orange but revert to the default gray of ui-state-default like below:
But if I go to the Chrome debugger and uncheck the background in ui-state-default in the style section, it works perfectly.
Is it because of this snippet:
var nodes = document.getElementById('selectable').getElementsByClassName('ui-widget-content');
if (nodes.length > 0)
{
nodes[0].innerHTML = getSymbol();
nodes[0].setAttribute("class", "ui-state-default");
}
How do i go around this problem, such that when i click on the element of interest, the color will change like i specified in the <style> tag.
With jQuery, this is quite simple.
$('.ui-widget-content') will select all of your LI elements. (alternately you could use $('#selectable li'))
$('.ui-widget-content').click(function() {
$(.'ui-widget-content').removeClass('.ui-state-default'); <-- this clears previous selections
$(this).addClass('.ui-state-default'); <-- this adds the class to the clicked item
})
I am making a list with a heading and subheadings. My main list, Home1, is followed by a subheading. How can I exactly position the subheading content without affecting another list?
<div id="wrapper">
<ul id="testnav">
<li>
Home
<ul id="subnav">
<div style=" float : left; width :70%;" >
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div>
<div STYLE="float : left; width :30%; height:900px;">
Sub Heading Content
</div>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</div>
#testnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 900px;
}
#subnav {
list-style: none;
padding: 0;
marigin: 10px 10px 10px 0;
width: 300px;
}
I'm having a hard time understanding the question, but looking at your markup I see that you have a DIV as a direct descendant of a UL. Only LI elements can be children of UL.
<ul id="subnav">
<div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</div> <!-- THIS DIV CANNOT BE HERE -->
<div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
Sub Heading Content
</div> <!-- THIS DIV CANNOT BE HERE -->
</ul>
Also, ul > div is not valid HTML.
The first step to solving your problem is making sure your markup is correct as Andy Ford suggested. Secondly, making sure your spelling of the CSS in the code is correct may help.
From what I can decipher from your question, you're trying to make sure that #subnav is absolutely positioned relative to #testnav.
<ul id="testnav">
<li>
Home
<ul id="subnav">
<li>Sub Heading</li>
<li>Sub Heading</li>
<li>Sub Heading</li>
</ul>
</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
#testnav, #subnav { list-style:none; padding:0; }
#subnav {
position: absolute;
width: 300px;
}
I am not sure if that's what you want, but generally the first step to figuring out what's going wrong with CSS is to remove every extraneous addition you can.