In Bootstrap 3, I want to put several links in a drop-down menu:
<li class="dropdown">
<a id="alert" data-toggle="dropdown" class="dropdown-toggle" href="#" title="Notification">Notifications </a>
<ul id="noti" class="dropdown-menu">
{% for t in alerts%}
<li>
{{t.title}}
</li>
{% endfor %}
</ul>
</li>
The problem is that each link has a different width, so I'm wondering how to define css to wrap even the longest links in the menu?
I have implement snippet that you can change as per your requirement.Main part is CSS change :
.dropdown-menu {
max-width: 180px;
}
.dropdown-menu li a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>HTML CSS JavaScript bootstrap</li>
</ul>
</div>
</div>
</body>
</html>
Try this one.
<li class="dropdown">
<a id="alert" data-toggle="dropdown" class="dropdown-toggle" href="#" title="Notification">Notifications </a>
<div class="dropdown-menu" style="width: auto;">
<ul id="noti" >
{% for t in alerts%}
<li>
{{t.title}}
</li>
{% endfor %}
</ul>
</div>
</li>
All I did was put 'div' tag around 'ul'. This one worked for me.
Try solution define in following link :
https://github.com/silviomoreto/bootstrap-select/issues/351
Related
I can use outline styled buttons on common Navbar nav-item, but when it's a "nav-item dropdown" the button is not showing its borders, see on the image below. Is there any way to make it show borders?
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role="button">
Disprofarma
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/PedidoDisprofarma/Index">Pedidos</a>
<a class="dropdown-item" href="/RecepcionDisprofarma/Index">Recepción de Pedidos</a>
</div>
</li>
Not sure, why you are using nav-item here, but if you want to use btn-outline-secondary class, then you need to add btn class too, see here
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn btn-outline-secondary" href="#" id="navbardrop" data-toggle="dropdown" role="button">
Disprofarma
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/PedidoDisprofarma/Index">Pedidos</a>
<a class="dropdown-item" href="/RecepcionDisprofarma/Index">Recepción de Pedidos</a>
</div>
</li>
</body>
Can anyone suggest how to adjust submenu(s) parallel to main menu.(without using negative margin-top)
Need output like this
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
.dropdown-submenu {
position: relative;
}
All you need to do, is remove that. Then the outer div container will become the reference point for the absolute positioning of those elements (because it is now the closest positioned ancestor.)
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
/*
.dropdown-submenu {
position: relative;
}
*/
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">
Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.
The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
#media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
.navbar-fixed-top sets (position:fixed;left:0;top:0;right:0) to your element. so delete this class from your nav tag
add rules to #navbar id or .navbar class to add the padding rules you want to extend the css from Bootstrap in your demo.css file.
If you want to overwrite the bootstrap css property or any other just give "!important"
html, body {
background:#fbf3e8 !important;
}
body {
margin:0 !important;
padding:2em 5px !important;
}
My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
#media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
A few things to consider.
Make sure the CSS selector matches the rule you want to override in the bootstrap file exactly. So if div > a > span don't go div > span
Make sure the bootstrap file isn't using the keyword !important
Add a type="text/css" to the bootstrap link
lastly, see if it works if you put the keyword !important