I have here my sidenav but it keeps indenting and indenting everytime i put an icon before my link. Please help me..
<ul id="mobile-demo" class="side-nav">
<li>
<div class="userView">
<img class="background" src="http://materializecss.com/images/office.jpg">
<img class="circle" src="http://materializecss.com/images/yuna.jpg">
<span class="white-text name">Nelson Maranan</span>
<span class="white-text email">nmaranan11#gmail.com</span>
</div>
</li>
<li><i class="material-icons">home</i>Home</li>
<li><i class="material-icons">list</i>Browse</li>
<li><i class="material-icons">message</i>Messages <span class="badge">3</span></li>
<li><i class="material-icons">notifications</i>Notifications <span class="badge">10</span></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
Here's my screenshot to show the problem:
But when I remove icons it displays just fine. How can I fix this issue?
I faced this issue too.
Just add this rule in your stylesheet:
.side-nav li{
clear: both;
}
Related
I have a problem with submenu that I use from bootstrap. It became a text not a button to go another page, here is some code that I use
This is the latest vue and bootstrap 4, I've tried some tutorial's but didn't work
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li><a><i class="fa fa-edit"></i> Penjualan <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a>Pemesanan penjualan<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><router-link to="/pemesananPembelian">P.O Penjualan</router-link></li>
<li><router-link to="/konfirmasipemesananPenjualan">P.O Konfirmasi</router-link></li>
<li><router-link to="/dikirimpemesananPenjualan">P.O Dikirim</router-link></li>
<li><router-link to="/batalpemesananPenjualan">P.O Batal</router-link></li>
</ul>
</li>
I want to make a sub menu to go another page, but the submenu didn't work and become a textenter code here
Check out the official doc:
https://router.vuejs.org/api/#router-link
<router-link tag="li" to="/foo">
<a>/foo</a>
</router-link>
I am trying to get a series of controls positioned vertically and centered horizontally. The controls are coming out fine, but when I cause the dropdown to drop down, the dropdown text appears left justified on the screen rather than under the centered dropdown control. I've spend a couple of hours on it and I can't get it right. Help would surely be appreciated. Here is what I am using:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;">
</div>
You could solve this issue using css like i did here:
http://www.bootply.com/zck8H4EVt4
Just add this to your CSS:
.dropdown-menu {
left: 50%;
transform: translate(-50%, 0);
}
// EDIT:
Sorry, i've forgot about the btn-group class...
Just remove the CSS part from the first solution, add .btn-group to your dropdown and use .clearfix after your btn-group like i did here:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<div class="clearfix"></div>
<input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off">
</div>
Working example: http://www.bootply.com/lryEFqtmdp
when the width gets < 768px it show the toggle icon on the right bottom but when I click on it it does not show the list items I defined. can anyone advise me on this? appreciated.
https://jsfiddle.net/fj0u49bj/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a>title</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a>Link2 </a>
</li>
<li>
<a>Log In</a>
<a>Sign Up</a>
</li>
</ul>
</div>
</nav>
I think you are missing to load jQuery. Bootstrap.js is build on top of jQuery which means that can not work without it.
If you do have jQuery (before bootstrap.js) than probably your navigation formatting is not properly done.
Have a look at this fiddle (link in the comment below) so you can see how a correct nav-bar must be.
Is it possible in bootstrap 3 to center brand name in the middle of the menu item? For example there is four menu item, i want two items on the left side, and two on the right side and brand name in the middle of these two menu links. Thnaks in advance for the help.
Step 1 Wrap a <div class="pull-left"> around the two icons you want on the left
Step 2 move this div before the <a class="navbar-brand"
Step 3
Wrap a <div class="pull-right"> around the two icons you want on the right. Make sure this div follows the navbar-brand
This method can help you, however it is best if you post the relevant code here.
Hope this helps!
You can use the nav-justified class...
<div class="navbar">
<ul class="nav nav-justified">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Brand</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Demo: http://bootply.com/105175
Do it like my code. Get the anchor tag with navbar-brand out of the navbar-headerand place it after the closing div. like in the code below.
navbar code
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
</div>
</nav>
Place this code into your css file
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
mar
}
Here is the link to the working example
http://www.bootply.com/98314
You can use a much simpler approach too, just setting a percentage:
.navbar-brand {
position: absolute;
left: 50%;
}
Side Note: I haven't tested with IE. Usually I don't like percentages, but... it works!
How can I vertically center the glyphicon (and badge) elements in this context:
<ul class="list-group">
<li class="list-group-item">
Multi-line content...
<span class="glyphicon glyphicon-chevron-right pull-right"/>
</li>
<li class="list-group-item">
Multi-line content...
<span class="badge">123</span>
</li>
</ul>
By multi-line content I mean a varying number of lines and in some cases wrapping text and a variety of font sizes.
This is to provide navigation pages for a mobile app that include the visual hint of an arrow over to the right. When the content wraps or has other multi-line elements vertical centering is what other frameworks provide but they typically use background images. I am using Bootstrap 3.0.0.
How about this..
.list-group-item span {
margin-top: -0.5em;
}
DEMO: http://bootply.com/95790
<div class="list-group">
<div class="list-group-item">
<div class="media-body">
Multi-line content...
</div>
<div class="media-right" style="vertical-align:middle;">
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
</div>
</div>