I simply want to add some additional righthand margin to the bootstrap glyphicons in an a-tag, but it won't work out. The menu looks as follows:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-open"></i>Choose project...<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Project 1</li>
<li>Project 2</li>
</ul>
</li>
<li>
<a href="#" class="btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Open layer...<input type="file">
</a>
</li>
</ul>
And the css I am trying to use is:
a > .glyphicon {
margin-right: 6px;
}
The menu looks fine, when setting the margin in the inline style and even when live-editing the site (using MagiCSS), the selector works properly. But when loading it from file, it has no effect (I checked if I am editing the proper .css-file and reloaded the browser cache already)..
Does anybody see something here? Could this be because of some bootstrap styles the glyphs inherit?
Thanks in advance for any help/advice.
Kim
Solved
Thanks Paulie_D for the tip. I could not reproduce this in JSFiddle either, but adding
i { display: inline-block; }
did the trick on my local copy!
try this instead
a > .glyphicon {
margin-right: 6px!important;
}
Related
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
When testing my website with Google Website Translator, I noticed that Google is changing the HTML structure of my page resulting in CSS styles not being applied.
For example, this piece of HTML (using Bootstrap):
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a title="About us" href="/about/">About us</a>
</li>
</ul>
Is changed into this format:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<span class="notranslate" onmouseout="_tipoff()" onmouseover="_tipon(this)">
<span class="google-src-text" style="direction: ltr; text-align: left">
<a title="About us" href="...">Over ons</a>
</span>
<a title="About us" href="...">About us</a>
</span>
</li>
</ul>
Basically, my links are being wrapped by a <SPAN>. How can I avoid that?
Update:
Google Website Translator also removes SPANs that are wrapped around SVGs, even if these elements are not a link. Very bizarre. For example:
<div>
<span>
<svg>...</svg>
</span>
</div>
Is turned into:
<div>
<svg>...</svg>
</div>
This is a native aspect of Google Translate. Best put in some CSS to fix any breakages.
I've found a fix, which is specifically targeting Google Website Translator as follows.
I've changed this:
nav > li > a {
....
}
Into this:
nav > li > a,
nav > li > span.notranslate > a {
...
}
I would like to prevent the Bootstrap .dropdown-menu from ever being wider than the main nav bar (which I have restricted to be the width of the .container class). I'd like for the dropdown menu to take up the width of the container class, but it shouldn't extend beyond that on either side.
Any ideas how to accomplish this, preferably using CSS?
Here's an example of what it currently looks like and what I'd like it to look like:
Here's a boiler plate navbar with a dropdown menu that has one really long menu item:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action a really long menu item that extends way beyond the limits of "container" and may even extend beyond the view port area to the right, making some of the text unreadable.</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Explanation
Bootstrap's adds position: absolute to the .dropdown-menu class. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find with position: relative. In Bootstrap, this is provided by the .dropdown wrapper
So if you want to position the element relative to the container, and not the nav item, we'll have to remove relative positioning from the .dropdown wrapper. You can do this by resetting the value to the initial value for the position property, which is static.
Congratulations! The menu is no longer constrained by the .dropdown element, but we still have some work to do.
Because bootstrap was not intending to space constrain the menu, menu items are given the property white-space: nowrap so they'll extend as long as they need. Think lines of code inside code blocks here on stack overflow (1 line = 1 line). Since we want the line to eventually end, this won't do. So we'll reset the anchor tags back to white-space: normal.
At this point the .dropdown-menu should take up the full size of the .navbar (which itself takes up the full size of the .container). This is where yamm3 is doing something really cool. It sets left: auto on the dropdown-menu.
According to MDN on the left property:
auto is a keyword that represents:
for absolutely positioned elements, the position of the element based on the right property and treat width: auto as a width based on the content.
So setting the .dropdown-menu to left:auto will cause the menu to start in its current location and extend all the way to the right of the container.
Just Codes
Just add the .fill-width class to your .dropdown element and include the following CSS:
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
Working Demo in jsFiddle
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
right: 0;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown fill-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I want to the class dropdown invisible. dropdown will be used only for specific li tags. I tried this, but it doesn't work:
.dropdown{
display:none;
}
Is there a way to make this work? Am I doing something wrong in my CSS?
HTML:
<div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
page
<ul class="dropdown-menu">
<li>page1 </li>
<li>page2 </li>
<li>page3 </li>
<li>page4 </li>
<li>page5 </li>
</ul>
</li>
<a id="Homepage" class="navbar-brand" href="somepage.com">
<img src="/images/aGif.gif?v=24820" alt="someotherpage.com" border="0">
</a>
</ul>
</div>
My best guess is that it is a specificity issue. That is, .dropdown selector is not detailed enough to override other selectors that come with Bootstrap. Make the selector more specific (i.e., #MainNavigation.nContainer[name = "MainNav"] > .nav.navbar-nav > .dropdown) and see if it works.
It's common for menus on desktop apps to show the name of the action on the left and the keyboard shortcut on the right, like this.
I want to do the same thing in a Bootstrap dropdown. However, I can't seem to get it to work. I've tried several things. Here is the code for the two closest tries and a link to a demo.
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="text-muted pull-right">Alt+P</span>Label</li>
<li><span class="text-muted pull-right">Alt+P</span>Long long long long long label</li>
</ul>
</li>
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 2 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="pull-left">Label</span><span class="text-muted pull-right">Alt+P</span></li>
<li><span class="pull-left">Long long long long long label</span><span class="text-muted pull-right">Alt+P</span></li>
</ul>
</li>
</ul>
Again, here's a link to a demo.
Both Try 1 and Try 2 work for short labels, but not for long labels.
With Try 1, the problem is that the label and the shortcut overlap.
With Try 2, the problem is that the shortcut gets pushed to another line, and there is also some weirdness with hovering over the items.
What I want is for it to all be on one line, so you see something like this (that image is just a fake that I made in GIMP).
I tried many ways to get the result with Bootstrap classes, but I think you'll need a bit of custom CSS. Here is an example :
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Label <span class="kbd text-muted">Alt+S</span></li>
<li>Not labeled</li>
<li>Long long long long long label <span class="kbd text-muted">Alt+L</span></li>
</ul>
</li>
</ul>
.dropdown-menu > li > a {
position: relative;
padding-right: 70px;
}
.dropdown-menu > li > a > span.kbd {
position: absolute;
right: 20px;
top: 3px;
}
Updated Bootply
Can you look at http://bootply.com/99291
and look this code :
<a id="drop1" href="#" class="dropdown-toggle" data-toggle="dropdown">Try 1 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><span class="text-muted pull-right">Alt+P</span>Label</li>
<li><span class="text-muted pull-right">Alt+P</span><span style="white-space: normal;">Long long long long long label</span></li>
</ul>
Your very long text is wrap in a span with <span style="white-space: normal;">
Does it render better for what you want ?