Drop down menu is not displaying sublists - html

<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle"> Home </a>
<ul class="dropdown-menu">
<li routerLinkActive="active" routerLink="/application/link1">
<i class="fa {{aplcntStatusIcon}}" ></i> Link1
</li>
<li routerLinkActive="active" routerLink="/application/link2">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link2
</li>
<li routerLinkActive="active" routerLink="/application/link-3">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link3
</li>
</ul>
</li>
When I am trying with the following code it is displaying 'Home' with the dropdown toggle but when I try to expand that, it is not displaying the subitems (Link1,Link 2,Link3).


You have not given the full code, so I am writing this answer assuming you are using Bootstrap 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<li class="dropdown">
<button data-toggle="dropdown" class="dropdown-toggle"> Home </button>
<ul class="dropdown-menu">
<li routerLinkActive="active" routerLink="/application/link1">
<i class="fa {{aplcntStatusIcon}}" ></i> Link1
</li>
<li routerLinkActive="active" routerLink="/application/link2">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link2
</li>
<li routerLinkActive="active" routerLink="/application/link-3">
<i class="fa {{cpStatusIcon}}" aria-hidden="true"></i>Link3
</li>
</ul>
</li>
</body>
</html>
See if the above code solves your problem.


I'm assuming you are using Bootstrap 4.x the script popper or the bootstrap bundle.
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
https://getbootstrap.com/docs/4.5/getting-started/download/
Just add this to you head tag
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

Related

How navigation menu responsive on mobile tablet

I tried to make my navigation menu keep responsive on mobile and tablet, but it always break into new line when I tested responsive mobile from browser development tool.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Application Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="navbar navbar-default navbar-static-top" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class='fa fa-floppy-o'></i> New
</li>
<li>
<i class='fa fa-pencil-square-o'></i> Edit
</li>
<li><i class='fa fa-check'></i> Cancel</li>
<li>
<div class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="ID" ID="ID">
</div>
</div>
</li>
<li>
<div class="btn-group" style="padding: 9px 0px 0px 0px; margin-left: 15px;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">More Action</button>
<button type="button" class="btn btn-primary" data-toggle="dropdown">
<i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><i class='fa fa-files-o'></i> Copy Record</li>
<li><i class='fa fa-clipboard'></i> Paste Record</li>
<li><i class='fa fa-reply'></i> Reverse Record</li>
<li class="divider"></li>
<li><i class='fa fa-list'></i> List Live Record</li>
<li><i class='fa fa-list'></i> List Un-authorize Record</li>
<li><i class='fa fa-list'></i> List History Record</li>
<li class="divider"></li>
<li><i class='fa fa-print'></i> Export Record</li>
</ul>
</div>
</li>
</ul>
</div>
I would like to keep menu button, input box and dropdown menu keep as one line even on the mobile tablet break point.
How can I archive that, I'm not sure if problem caused from this <meta name="viewport" content="width=device-width, initial-scale=1"> but the only goal I would like to keep it as responsive. Thanks.

"HTML: Error: <nav> is not recognized!" In Komodo Edit

I am working on an index.html file and inside my head and body tag, I have a nav element. However, in Komodo Edit, version 10.1.1, build 17414, platform linux-x86_64., It red-underlines the nav element and gives me the following erorr message:
HTML: Error: <nav> is not recognized!
This is what my code looks like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
Does anyone know what might be causing this?

Komodo has 2 "Languages" that cover HTML, one is called "HTML" and one is called "HTML5". HTML5 covers the nav element, HTML does not. You need to change your language selection to HTML5.
The language selection is done from the right side of the statusbar, it should currently say "HTML".

Can this Work?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/static/js/script.js"></script>
<script src="/socket.io/socket.io.js"></script>
</head>
<body><div class="sidebar"></div><nav class="main menu">
<ul class = button-container>
<li>
<i class="fa fa-font" style="font-size:6em;"></i>
</li>
...
<li>
<i class="fa fa-picture-o" style="font-size:6em;"></i>
</li>
</ul>
<ul class="export button-container">
<li>
<i class="fa fa-floppy-o" style="font-size:6em;"></i>
</li>
</ul>
</nav>
<nav class="menu font" style="display: none;">
<p>Font</p>
</nav>
...
<nav class="menu picture" style="display: none">
<p>Pictures</p>
</nav>
</body>
</html>
this Might not work but guess Ill try

Cant figure out how to make this nav tab a dropdown menu

I just haven't been able to figure out the syntax
I am trying to have a drop-down menu appear when I click on the second button.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
</body>
</html>
My first attempt at making a nav menu. (For some reason, I am unable to submit this question without providing "details" so please forgive this meaningless text here)

I think you're missing the call to bootstrap's javascript library which is needed for the hamburger nav. Try adding this after you add the jquery reference (i.e. <script src="...jquery.min.js"...)
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
For more information, see the Bootstrap documentation page: Getting Started, as well as the updated code snippet below.
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -- >
<link rel="stylesheet" type="text/css" href="mystyle.css">-->
<!--end head: </head> start body:<body>-->
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>

Bootstrap responsive doesnt work.

I am using bootstrap in my project but when I resize the window my template commix completely.My navbar would explode and some part of my page is not shown and...
Every thing is wrong...
And when I use a mobile to see my website not only the bootstrap is not loaded but also every thing is wrong there too.
I use just the codes in bootstrap site but in their site its working well and in my project its not.
for example I copied this navbar from the site and it has the problem with resizing:
<div class="navbar navbar-inverse" style="position: static;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".navbar-inverse-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Link
</li>
<li>
Link
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>
Separated link
</li>
<li>
One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input class="search-query span2" type="text" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>
Link
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
what should I do to solve this problem?
Edit:
The issue is solved for resizing the window but the problem with mobile is remained...
My _Layout header code is like this:
<
head>
<meta charset="utf-8" />
<style type="text/css">
##media (max-width: 767px) {
.search-query {
display: none;
}
}
##-ms-viewport {
width: device-width;
}
</style>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="~/Content/mosaic.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/mosaic.1.0.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/Site.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.bar').mosaic({
animation: 'slide'
});
});
</script>
</head>
I have the codes between <style> tags in my bootstrap-responsive.css too.

Try adding this line in the head section of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't work you can use media queries, like the following:
#media (max-width: 767px) {
.search-query {
display: none;
}
}
More info about media queries is here: http://twitter.github.io/bootstrap/scaffolding.html#responsive

Bootstrap / Dropdown Button

Hi Im trying to create a dropdown button using bootstrap. But it just doesnt seem to come out correctly ?
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
A jsfiddle is here http://jsfiddle.net/UrgP8/
Any ideas ?
Thanks,

You are loading a hefty amount of external resources into jsfiddle by pasting what is practically the full boostrap html source into the html view.
Here is a much more bare-bones version
that loads only three external files.
http://jsfiddle.net/BqKNV/65/
The base html is the same (SO wouldn't let me post without putting in code...)
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
Note that jQuery is loaded via jsFiddle's Framework panel,
bootstrap css and js are loaded via the BootstrapCDN:
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js
What happens if you save this html as a page, and run it in a browser?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
<body>
<div class="dropdown btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Foo</li>
<li>Bar</li>
</ul>
</div>
</body>
</html>

Ok found what seems to be the problem in your fiddle.
It's that you are loading:
<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
I changed it to:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
And that basically solved it.
You can see it here: http://jsfiddle.net/6hPMb/1/
But besides that, the problem I mentioned in the comments still stands, you are loading both bootstrap-dropdown.js and bootstrap.min.js
You should only use one.