I have this html page using meteor and fontawesome packages. When I open this page I have all the dropdown-menu opened and when I click one of the down arrow they all close. I make a lot of try to close those pannels, but all try stop the correct hide/display of the pannels.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>APP</title>
</head>
<body>
<div class="container">
{{> loginButtons }}
{{> userList }}
</div>
</body>
<template name="userList">
{{#if currentUser}}
<div id="userList" class = "panel panel-default">
<div class="panel-heading">Users</div>
<ul class = "list-group">
{{#each user in allUser}}
{{#with user}}
<li class="user list-group-item >{{> userOptions }}</li>
{{/with}}
{{/each}}
</ul>
</div>
{{/if}}
</template>
<template name="userOptions">
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> {{username}} </a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-pencil fa-fw"></i> Edit</li>
<li><i class="fa fa-trash-o fa-fw"></i> Delete</li>
<li><i class="fa fa-ban fa-fw"></i> Ban</li>
<li class="divider"></li>
<li><i class="fa fa-unlock"></i> Make admin</li>
</ul>
</div>
</template>
I see they have css display:block. On the console i try to write $(".dropdown-menu").toggle() and it work, but after i can't open the dropdown menu
Just remove open from <div class="btn-group open"> if you don't want it to open by default.
Related
I'm trying to learn Asp.Net Core MVC using .net 5 with the pre-built, scaffolded razor identity pages. I'm getting this rendered result when I click login or register from the sticky header. How do I format the (razor) login page(s) to start below the sticky header? The sticky header is from a bootstrap theme that worked fine prior to the scaffolled pages. I did not touch the css code as I don't know what I'm doing there.
Razor page under sticky header
The Login Page looks like this...
#page
#model LoginModel
#{
ViewData["Title"] = "Log in";
}
<div mt-3>
<h1>#ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<section>
<form id="account" method="post">
<h4>Use a local account to log in.</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
<div class="form-group">
<p>
<a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
</p>
<p>
<a asp-page="./Register" asp-route-returnUrl="#Model.ReturnUrl">Register as a new user</a>
</p>
<p>
<a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
</p>
</div>
</form>
</section>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h4>Use another service to log in.</h4>
<hr />
#{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See this article
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="#Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
#foreach (var provider in Model.ExternalLogins)
{
<button type="submit" class="btn btn-primary" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account">#provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
This is the _Layout Code
<!DOCTYPE html>
<!--Home Layout Page-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#ViewData["Title"] - SRP</title>
<link href="~/css/style-liberty.css" rel="stylesheet" />
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/jquery.countup.js"></script>
<script src="~/js/jquery.magnific-popup.min.js"></script>
<script src="~/js/jquery.waypoints.min.js"></script>
<script src="~/js/owl.carousel.js"></script>
<script src="~/js/theme-change.js"></script>
</head>
<body>
<!--header-->
<header id="site-header" class="fixed-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<h1>
<a class="navbar-brand" asp-area="" asp-controller="Main" asp-action="Index">
<span>THIS IS THE HOME PAGE</span>
</a>
</h1>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa icon-expand fa-bars"></span>
<span class="fa icon-close fa-times"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Services">Services</a>
</li>
#*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="blog.html" class="drop-text">Blog Posts</a>
<a class="dropdown-item" href="blog-single.html" class="drop-text">
Blog
Single post
</a>
</div>
</li>*#
#*<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pages <span class="fa fa-angle-down"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="error.html" class="drop-text">404</a>
<a class="dropdown-item" href="contact.html" class="drop-text">Contact</a>
<a class="dropdown-item" href="landing-single.html" class="drop-text">Landing page</a>
</div>
</li>*#
</ul>
<ul class="navbar-nav search-right mt-lg-0 mt-2">
<li class="nav-item mr-3" title="Search">
<a href="#search" class="btn search-search">
<span class="fa fa-search" aria-hidden="true"></span>
</a>
</li>
<li class="nav-item">
<a class="btn btn-primary d-none d-lg-block btn-style mr-2" asp-area="" asp-controller="Home" asp-action="ContactUs">Contact Us</a>
#*<a href="contact.html" class="btn btn-primary d-none d-lg-block btn-style mr-2">
Contact Us*#
</a>
</li>
</ul>
<partial name="_LoginPartial" />
<!-- //toggle switch for light and dark theme -->
<!-- search popup -->
<div id="search" class="pop-overlay">
<div class="popup">
<form action="#" method="GET" class="d-sm-flex">
<input type="search" placeholder="Search.." name="search" required="required" autofocus>
<button type="submit">Search</button>
<a class="close" href="#url">×</a>
</form>
</div>
</div>
<!-- /search popup -->
</div>
<!-- toggle switch for light and dark theme -->
<div class="mobile-position">
<nav class="navigation">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<span class="mode-container">
<i class="gg-sun"></i>
<i class="gg-moon"></i>
</span>
</label>
</div>
</nav>
</div>
</nav>
</div>
</header>
<!--/header-->
<div class="container-fluid bod-2">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<!-- footer-66 -->
<footer class="w3l-footer-66">
<section class="footer-inner-main">
<div class="footer-hny-grids py-5">
<div class="container py-lg-4">
<div class="text-txt">
<div class="row newsletter-grids-footer">
<div class="col-lg-6 newsletter-text pr-lg-5">
<h3 class="hny-title two">Newsletter</h3>
<h4>
Sign up for our monthly newsletter to get the latest news, volunteer opportunities,
</h4>
</div>
<div class="col-lg-6 newsletter-right">
<form action="#" method="post" class="footer-newsletter">
<input type="email" name="email" class="form-input" placeholder="Enter your email..">
<button type="submit" class="btn">Subscribe</button>
</form>
</div>
</div>
<div class="right-side">
<div class="row sub-columns">
<div class="col-lg-4 col-md-6 sub-one-left pr-lg-4">
<h2>
<a class="navbar-brand" href="index.html">
<span>Capture & Response</span>
</a>
</h2>
<!-- if logo is image enable this
<a class="navbar-brand" href="#index.html">
<img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
</a> -->
<p class="pr-lg-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur hic odio voluptatem tenetur consequatur.Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</p>
<div class="columns-2">
<ul class="social">
<li>
<span class="fa fa-facebook" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-linkedin" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-twitter" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-google-plus" aria-hidden="true"></span>
</li>
<li>
<span class="fa fa-github" aria-hidden="true"></span>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Our Services</h6>
<div class="mid-footer-gd sub-two-right">
<ul>
<li>
<span class="fa fa-angle-double-right mr-2"></span> About
</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span> Services
</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span> Car Wash
</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span>Electrical system
</li>
</ul>
<ul>
<li>
<span class="fa fa-angle-double-right mr-2"></span>Tire and wheel
</li>
<li>
<a href="#">
<span class="fa fa-angle-double-right mr-2"></span>Help
Orphan
</a>
</li>
<li><span class="fa fa-angle-double-right mr-2"></span>Career</li>
<li>
<span class="fa fa-angle-double-right mr-2"></span>Contact US
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 sub-one-left">
<h6>Contact Info</h6>
<div class="sub-contact-info">
<p>Address: 8436 Jasmine Parkway, Mountain View, CA 84043, United States.</p>
<p class="my-3">Phone: <strong>+24 1600-33-999</strong></p>
<p>E-mail:<strong> info#example.com</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="below-section">
<div class="container">
<div class="copyright-footer">
<div class="columns text-lg-left">
<p>© 2020 Capature & Response. All rights reserved.</p>
</div>
<ul class="columns text-lg-right">
<li>
Privacy Policy
</li>
<li>|</li>
<li>
Terms Of Use
</li>
</ul>
</div>
</div>
</div>
<!-- copyright -->
<!-- move top -->
<button onclick="topFunction()" id="movetop" title="Go to top">
<span class="fa fa-long-arrow-up" aria-hidden="true"></span>
</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("movetop").style.display = "block";
} else {
document.getElementById("movetop").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!-- /move top -->
</section>
</footer>
<!--//footer-66 -->
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - SRP01 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Here is the style of fixed-top:
An element with position: fixed;does not leave a gap in the page where it would normally have been located.So that's why you get the rendered result.
If you want to format the (razor) login page(s) to start below the sticky header,try to remove class="fixed-top" in your _Layout <header id="site-header" class="fixed-top">.
If you don't want to remove fixed-top.You can also use the following style in _Layout to cover position: fixed; in .fixed-top:
<style>
.fixed-top {
position:initial;
}
</style>
I have a question if and how the following is achievable through CSS:
View 1 (large screens):
View 2 (medium-sized screens):
Secondary question: How to center the navigation elements as soon as they are placed in a the second line?
View 3 (mobile):
My problem is, that the right part of the navigation (govel, bookmark, ..., login) should be in the same line as the logo, if there is not enough space (medium-sized screens, View 2). But if mobile navigation gets activated (View 3), I want to be the "Suche", "Kataloge", "Kategorien"... links first.
Also it would be nice if the navigation elements can be centered in (View 2).
The whole thing is build with Bootstrap 3.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
nav#header img.favicon-logo {
padding-top: 5px;
height: 46px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" id="header">
<div class="container-fluid">
<!-- Titel und Schalter werden für eine bessere mobile Ansicht zusammengefasst -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="https://www.lotsearch.de/images/favicons/favicon_144x144.png" class="favicon-logo">
</a>
</div>
<!-- Alle Navigationslinks, Formulare und anderer Inhalt werden hier zusammengefasst und können dann ein- und ausgeblendet werden -->
<div class="navbar-collapse collapse" id="main-menu" aria-expanded="false" style="height: 1px;">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i>
Suche <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen)</li>
<li><i class="fa fa-archive fa-fw"></i> Suche (Archiv)</li>
</ul>
</li>
<li>
<a href="/auction-catalogs">
<i class="fa fa-book fa-fw"></i>
Kataloge </a>
</li>
<li>
<i class="fa fa-list-alt fa-fw"></i> Kategorien
</li>
<li>
<i class="fa fa-bell fa-fw"></i> Suchaufträge
</li>
<li>
<i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen
</li>
<li>
<i class="fa fa-newspaper-o fa-fw"></i> Blog
</li>
<li>
<i class="fa fa-star fa-fw"></i> Top-Seiten
</li>
<li>
<i class="fa fa-pencil-square-o fa-fw"></i> Registrieren
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/bids/management/bidlist" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-gavel fa-fw"></i> Gebote (Bietliste)
</div>
</a>
</li>
<li>
<a href="/favorites" title="Merkzettel">
<div class="icon-wrapper hidden-xs">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">0</span>
</div>
<div class="visible-xs">
<i class="fa fa-bookmark fa-fw"></i> Merkzettel
</div>
</a>
</li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-langauge">
<li><span class="flag-icon flag-icon-gb"></span> GB </li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-user fa-fw"></i> Login <span class="caret"></span>
<ul class="dropdown-menu dropdown-lr animated fadeIn" role="menu">
<li>
<div class="col-lg-12">
<h4>Login</h4>
<form method="post" name="loginform" action="/user/login" id="loginform">
<div class="form-group "><label>Email</label><input name="identity" type="text" tabindex="1" class="form-control" value=""></div>
<div class="form-group ">
<label for="credential">Passwort</label> <span class="pull-right">Passwort vergessen?</span>
<input type="password" name="credential" tabindex="2" class="form-control" value="">
</div>
<div class="form-group "><button type="submit" name="submit" class="form-control btn-orange btn btn-default" tabindex="3" value=""><span class="fa fa-sign-in"></span> Einloggen</button></div>
</form>
<div class="text-center pt-5px">
<p class="pb-5px">- ODER -</p>
<a class="btn btn-default" href="/user/registration/select-product">
<i class="fa fa-pencil-square-o"></i> Registrierung </a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am trying to get bootstrap dropdown list working on plnkr but it is not dropping down the list, I have created a plunk here:
http://plnkr.co/edit/tw3O5ihT7YB79BcAGlsh
This code was copied from bootstrap:
<body ng-controller="MainCtrl as vm">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="a in vm.exportAction">
<a ng-if="a.visble == true">
<span ng-click="vm.selectedExport(a)">{{a.action}}</span>
</a>
<div ng-if="a.divider == true">
<div role="separator" class="divider"></div>
</div>
</li>
</ul>
</div>
</body>
Any ideas?
Add Jquery and Bootstrap JavaScript files in head after Bootstrap's CSS - plnkr:
<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>
I have created a dropdown menu but it is not working:
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
Menu
<ul class="dropdown-menu">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</li>
</ul>
</div>
I am using Bootstrap CSS framework and have included all the appropriate CSS and JS files. What am I doing wrong? While looking at other questions similar to mines, I haven't been able to figure it out.
One solution may be that you are not referencing the jquery.js source before bootstrap.js source
You're missing some key elements.
This is what your dropdown element should look like.
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;">
This goes with the dropdown-toggle class.
data-toggle="dropdown" aria-expanded="false"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 col-md-4">
<ul id="hld" style="margin-top:10px;">
<li class="dropdown" style="border:1px solid #333;padding:5px;text-align:center;"> Menu <span class="caret"></span>
<ul class="dropdown-menu ">
<li>Tom
</li>
<li>Greg
</li>
<li>Jane
</li>
</ul>
</li>
</ul>
</div>
First mistake was a couple of quotation marks missing. On top of that, you are not following the syntax and classes listed here: http://getbootstrap.com/components/#dropdowns
Here is the correct version:
<div class="col-xs-6 col-md-4">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Menu
<span class="caret"></span>
</button>
<ul id="hld" class="dropdown-menu" style="margin-top:10px;">
<li>Tom</li>
<li>Greg</li>
<li>Jane</li>
</ul>
</div>
I have this code with a button:
<a class="btn btn-default btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<ul id="ma-mobilemenu" class="mobilemenu nav-collapse collapse" style="display: none;">
<li><?php echo $_menu ?></li>
</ul>
When the button is clicked I'd like to use this other code:
<a class="btn btn-default btn-sm">
<i class="fa fa-align-justify"></i>
</a>
<ul id="ma-mobilemenu" class="mobilemenu nav-collapse collapse" style="display: block;">
<li><?php echo $_menu ?></li>
</ul>
Use jquery to do your job:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a class="btn btn-default btn-sm">
<i class="fa fa-align-justify">Link/Button</i>
</a>
<ul id="ma-mobilemenu" class="mobilemenu nav-collapse collapse" style="display: none;">
<li>Menu</li>
</ul>
<script>
$(document).ready(function(){
$(".btn").click(function(){
if(($(".mobilemenu").css("display"))=='none'){
$(".mobilemenu").css("display","block");
}else{
$(".mobilemenu").css("display","none");
}
})
});
</script>
</body>
</html>
if you click the link <a></a> it will change <ul></ul> display none to block.