<ul> display inline-block not working - javascript

My jsFiddle is here : https://jsfiddle.net/r1s6651y/1/
I am not able to get Navigation with Numerals to be aligned horizontally.
I have applied display : inline-block for upper ul but still the next menu item begins on the second line.
Any clues ?
It should be stacked as :
1111111 22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB

You can't have li with width: 100%; and then expect them to align next to eachother. Ofcourse they naturally fall to 2 lines instead of 1, they're inline elements after all (Think of it like this: the <p> tag is also "inline" bu default. When the text in a <p> is too long, the text "breaks" to a new line. As will your li when it is set to be inline). You also want the li to next to eachother, not the ul which is what contains the li. So apply the display: inline-block; to the (correct) li elements
ul#myRow li {
width: auto; //could also be set to 50% if it's just 2 li elements
display: inline-block;
}

Two things. As already noted, you want the li items to be display:inline. You also need to remove the width:100% from the lis of #myRow. Then it will collapse and display inline as long as the container is wide enough for them (otherwise it will wrap).
li {
background: #00945f;
border-bottom: 1px solid #016e39;
clear: both;
float: none;
height: 62px;
margin: 0;
padding: 0 30px 30px;
width: 100%;
}
ul {
list-style-type: none;
}
ul#myRow li {
display:inline-block;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<ul id="myRow" class="row">
<li>
11111111
</li>
<li>
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>

Man, you do some mistakes.
I fixed it at: https://jsfiddle.net/r1s6651y/4/
li {
display: inline-block;
background: #00945f;
border-bottom: 1px solid #016e39;
margin: 0;
padding: 10px 20px;
}

put a class on the li you want horizontal, then add css display: inline
.horiz {
display: inline;
}
<section>
<ul id="myRow" class="row">
<li class="horiz">
11111111
</li>
<li class="horiz">
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>

Related

Collapseble list with columns?

I need to have a hierarchical, collapsible list that has 3 columns. I have the first two parts working, but I can't seem to get the CSS quite right for the third. The picture shows the current code:
(The slightly duplicated text to the left of col3 is a visual error with the fiddle.)
The goal is to have a three col pseudo-table within a collapsible list such that col1 has the standard list indenting, and col2 is centered for all levels and col3 is at the right for all levels. It should look like this:
I tried to accomplish this by having them both float right and then adding a margin/padding to either col2 or col3 so as to move col2 towards the middle where I want it to be. However, somehow col2 ends up on the outside of col3. Seems impossible to me, but with CSS no bug is impossible.
I have tried various other combinations of margins and paddings and float: lefts without luck.
Here's an almost working fiddle.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div id="listContainer">
<div class="listControl">
<a id="expandList"><button>Expand All</button></a>
<a id="collapseList"><button>Collapse All</button></a>
</div>
<ul id="expList">
<li>
<div class="col1">Non-parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Grandparent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
/********************/
/* EXPANDABLE LIST */
/********************/
#listContainer {
margin-top: 15px;
}
#expList ul,
#expList li {
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#expList p {
margin: 0;
display: block;
}
#expList p:hover {
background-color: #121212;
}
#expList li {
line-height: 140%;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/*This works in Firefox following W3C standards, but not in other browsers!*/
/*https://drafts.csswg.org/css-lists/#marker-content*/
/* Collapsed state for list element */
#expList .collapsed {
/* list-style-type: "+";*/
list-style: none;
/*padding: 0px;*/
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
/*list-style-type: "-";*/
list-style: none;
/*padding: 0px;*/
}
/*code that works for non-Firefox*/
#expList .collapsed:before {
content: "+";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList .expanded:before {
content: "-";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList {
clear: both;
}
.col1 {
display: inline;
/*padding-right: 100px;*/
}
.col2 {
display: inline;
float: right;
}
.col3 {
display: inline;
float: right;
}
JS:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Hack to add links inside the cv
$('#expList a').unbind('click').click(function() {
window.location($(this).attr('href'));
return false;
});
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children('ul').show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children('ul').hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready(function() {
prepareList()
});
The solution to this was to realize that float: right apparently also makes the blocks align right, so that they appear in reverse order. With this in mind, one can just switch the order of the blocks to get the normal order back.
E.g.:
<div class="col1">Non-parent</div>
<div class="col4">Col4</div>
<div class="col3">Col3</div>
<div class="col2">Col2</div>
Working fiddle.

Give submenu full column width using jQuery or CSS?

I am trying to make a menu that has some links in two levels.
What I am trying to do is to make it so that when you click on the top level then level 2 opens.
Right now my problem is that I want to have two columns but I want level two to be one full width column.
See my codepen here: http://codepen.io/mathiasha/pen/KdzmBL
I don't know if it's easiest to make it in CSS or jQuery.
I dont have control of the HTML.
<div class="block block-menu-block">
<ul class="menu">
<li>
1
</li>
<li>
2
<ul class="menu">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
</ul>
</li>
<li>
3
<ul class="menu">
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
</ul>
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
<ul class="menu">
<li>6.1</li>
</ul>
</li>
</ul>
</div>
See the CSS below:
.block-menu-block {
width: 100%;
border: 5px solid red;
overflow: hidden;
}
ul.menu {
list-style-type: none;
padding: 0;
margin: 0;
font-weight: bold;
}
ul.menu li {
display: block;
width: 50%;
border: 1px solid #000;
margin: -1px;
float: left;
text-align: center;
}
ul.menu li a {
display: block;
padding: 20px;
text-decoration: none;
}
li a ~ ul a {
color: green;
}
As long as first level LIs are set to be width:50%, children are bounded. Setting sub-level absolutely positionned could have been a solution, but in your case, it breaks the desired effect.
So a "dirty" solution that I can give you is to use this :
.block-menu-block ul li ul{ width:200%; margin-left:-100%; }
.block-menu-block ul li ul li{ width:100%; background:#fff;}
Sub-level UL width will be multiplied by two, and then has the same width as the menu. Used negative margin to make a translation, otherwise, it will start under the parent LI and will expend out of the menu boundaries.
And finally, reset the sub LIs width to 100% (background is used to hide parent borders).
Updated Codepen

different height to li tag

i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>

Button disappearing, overflow needs to kick in at max-width

So basically, I have a tab bar where you have an add button to clone tabs and later edit them. My problem is that once so many tabs are added, my (left and right arrows) and my add button are removed. How can I add tabs, but keep my buttons from disappearing? Fixed position is not an option, I want the buttons next to the newest tab, and once the bar reaches a max-width, the buttons stay there. the arrows are to scroll through the tabs to see one's that will be hidden on overflow. http://jsfiddle.net/pHraC/1/
html
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity</li>
<li>COQ - Products/Chemicals</li>
<li>Movement Summary</li>
<li>Barge Survey</li>
<ul class="tabButtons">
<li><-</li>
<li>-></li>
<li><div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' /></div></li>
</ul>
</ul>
</div>
jquery
// add new tab
$("input.addTab").live("click", function (event) {
var ultab = $(this).closest('.tabs'); // cache ul.tabs
var li = ultab.children('li:not(.selected)').first(); // cache the row
ultab.children('li:last').after(li.clone().find('a').attr("href", "#").text('New Tab').end());
});
First of all, I would suggest you seperate the .tabButtons form the .tabs
<div class="tabBox" style='max-width:800px'>
<ul class="tabs">
<li class="selected">Certificate of Quantity
</li>
<li>COQ - Products/Chemicals
</li>
<li>Movement Summary
</li>
<li>Barge Survey
</li>
</ul>
<ul class="tabButtons">
<li> <-
</li>
<li>->
</li>
<li>
<div class="tabNavAdd" title="Add another report form to nomination" style="margin-top:6px">
<input type='button' value='add' class='addTab' />
</div>
</li>
</ul>
then, use position:absolute to put them where you like:
.tabBox { position:relative;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 50px 0 0;}
.tabButtons {
position:absolute;
top:0px;
right:10px;
z-index:2;
}
You'll also have to define a position other than static to .tabBox for this to work and add some padding for the add button.
Finally, style the .tabs li like this:
.tabBox .tabs li {
display: inline-block;
list-style: none;
margin: 9px 0 0 0;
padding: 3px 1px 0;
height: 36px;
overflow: hidden;
position: relative;
z-index: 1;
}
and add white-space:nowrap; and display:inline-block; to the .tabBox .tabs
here's the result: http://jsfiddle.net/pavloschris/pHraC/4/
most simple way is to offset the top level <ul> with a padding and put the buttons as position absolute.
Here's a quick demo.
http://jsfiddle.net/ionko22/vURkK/
Oh and probably it's better to put your child <ul> within an <li>.

Displaying none in <li> <span> list multiple times

I couldn't think of a better way to word the title, but to the point.
I have my code set up like so:
<li>
<a class="news" href="http://MYLINK">
<span>News</span>
</a>
<ul>
<li class="blog">
<a href="http://MYLINK/">
<span>Blog</span>
</a>
</li>
<li class="news">
<a href="http://MYLINK">
<span>News</span>
</a>
</li>
</ul>
</li>
And each MYLINK has a background-image attached to it.
My CSS:
a.news { display: block; width: 105px height: 28px;
background-image: url(Icons/news.png); }
a.news span { display: none; }
And it will maintain the link and not show the text.
But when I do the same for the li classes blog and news it will not display the text,
but it will also not keep the link. Any help?
Should I be using js/jQuery to make this work properly?
You should specify width and height for links too:
li { width: 105px height: 28px; background-image: url(Icons/news.png); }
li a {display: block; width: 105px height: 28px;}
li a span { display: none; }

Categories

Resources