i am making a list of items with the <li> tag and different FontAwesome icon for each list item in twitter bootstrap. i tried to make the list test center vertically, but cant this way
<ul class="middle">
<li>
<a href="#">
<i class="icon-cog icon-2x"></i>
very long multiline item one</a>
</li>
<li>
<a href="#">
<i class="icon-pencil icon-2x"></i>
very long multiline item two
</a>
</li>
</ul>
which produced
this is what i want to achieve
How can i achieve this?
Is this what you are looking at
http://jsbin.com/iFaWoYa/1/
ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}
<ul class="middle">
<li>
<i class="icon-cog icon-2x"></i> very long multiline item one
</li>
<li>
<i class="icon-pencil icon-2x"></i> very long multiline item two
</li>
</ul>
You may set "position:relative" to <a> tag and "position:absolute" for <i>. Then add "padding-left: <size of your icon>" to <a> and "display: block" or "display: inline-block" because without "position" it would not work. And maybe "top: 0" and "left:0" to icon for right positioning;
Try using pull-left on the icon:
<li>
<a href="#">
<i class="icon-cog icon-2x pull-left"></i>
very long multiline item one</a>
</li>
Demo: http://bootply.com/86079
Related
I'm trying to add a div to each item in a Dropdown, however the item looses the bootstrap styling.
CSS
.ul.dropdown-menu li {
display: inline-block !important;
}
HTML
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div>
<a>Item One</a>
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div>
</li>
</ul>
</li>
I've created examples of the dropdown before and after the additional element to demonstrate the issue.
https://jsfiddle.net/Rob_H/nqu621vm/
For continue same style they need a tag as root otherwise you can enhance css
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
</ul>
</li>
Because bootstrap has a styles for .dropdown-menu>li>a but not for .dropdown-menu>li>div so you have to copy the needed styles from bootstrap dropdown and customize it for your needs.
Check the updated JSfiddle.
Hope this helps.
I'm trying to get the anchor to change color on active and focus but either my syntax is wrong or the style is being overrided.
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">OTHER</p>
</li>
<li>
<p class="drops">THING</p>
</li>
</ul>
</div>
</li>
</ul>
and my css
.drop a:hover,
.drop a:focus {
background:lightgoldenrodyellow !important;
color:red !important;
}
The background changes on hover and focus because of the !important (doesn't work without that) but the color does not change. Just need to make sure I don't have some silly syntax error before looking for conflicts. If it's a conflict and there's some other trick to overide it, I'd appreciate it.
Before HTML 5, <p> was a block-level element and <a> was inline, the latter should not contain the sooner.
In other words: <a> should be inside <p>, not the opposite. Perhaps your document is not HTML 5, or at least your browser don't treat it as such. The following code works fine for me:
.drop a:hover,
.drop a:focus {
background: lightgoldenrodyellow;
color: red;
}
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">
OTHER
</p>
</li>
<li>
<p class="drops">
THING
</p>
</li>
</ul>
</div>
</li>
</div>
</ul>
I have also fixed another syntax error in your HTML code: you forgot </div> before the last </ul>.
I see no real problem but you can:
change a:focus to a:active or make sure you are including the stylesheet in your html
I have a bootstrap tabs, and some of them have very long text, and it creates ugly space between tabs and content. How can I set the other tabs to have the same size as the biggest one?
<div class="tabs">
<ul class="nav nav-tabs nav-justified">
<li>
<a href="#" class="text-center">
<i class="fa fa-wifi"/> Not that long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Something really really really long</a>
</li>
<li>
<a href="#" class="text-center">
<i class="fa fa-map-marker"/> Not that long</a>
</li>
<li class="active">
<a href="#" class="text-center">
<i class="fa fa-star"/> Not that long</a>
</li>
</ul>
<div class="tab-content"></div>
</div>
Found a solution!
<style>
.nav-tabs{
display: flex;
}
.nav-tabs li {
display: flex;
flex: 1;
}
.nav-tabs li a {
flex: 1;
}
</style>
You can either make them all taller or you can shorten the name of the tab that's too long. Tab names shouldn't really be very long anyways.
If you can't use flexbox (which is not supported by older browsers), your only choice is to set all the tabs as tall as the tallest one explicitly with a pixel height. Flexbox is a great and sadly not yet fully usable solution to this kind of problem. Without it, there's no flexible way to accomplish this.
I have the following dom tree:
<ul class="nav">
<li>Item1</li>
<li>Item2</li>
<li>Item3 That Has a List</li>
<ul>
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση...">
<span class="input-group-btn">
<div class="dropdown">
<a id="toolsDrop" href="" role="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" style="padding: 6px 6px 6px 8px;">Filters <b class="caret"></b>
</a>
<ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
<li>Filter1</li>
<li>Filter2</li>
<li>Filter3</li>
<li>Filter4</li>
</ul>
</div>
</span>
</div>
</li>
<li>
<ul class="nav nav-second-level sidebar-device-list">Another list that gets filtered by the dropdown and thus, changes size
</ul>
</li>
</ul>
<li>Item4</li>
<li>Item5</li>
</ul>
As you can see in these pictures:
, because the <div class="dropdown"> is under a div inside a list, other list items, will be rendered above the dropdown menu, if the list element that has the dropdown button is too small. I have tried setting the z-index of the dropdown menu to 99999 but it doesn't work, because of how z-indexes work (given that the elements have different parents, they are in a different stacking order/scope as shown in this article).
Is there any way, other than setting the positioning of the dropdown menu to fixed, to show it above the rest of the list? (I don't want it to be above everything in the page, just above the rest of the parent ul's elements.
FINALLY I remembered the cause:
the parent element has overflow-y: hidden
Set that to initial/visible and the dropdown will be shown.
Use z-index property with the higher values for the dropdown and lesser z-index for the other div which needs to go down.
Try with giving z-index:999 for nav class. It's worked for me.
I work with bootstrap 3+. i have this code for list inline with icon :
<ul class="list-inline">
<li>
<h2><i class="fa fa-book fa-2x"></i> test link</h2>
</li>
<li>
<h2><i class="fa fa-book fa-2x"></i> test link</h2>
</li>
</ul>
this worked but icon not in middle vertical align. how do fix this problem ?!
DEMO : FIDDLE
.fa {
vertical-align: middle;
}
demo - http://jsfiddle.net/z52bL7L6/1/