I am fairly new with Asp.net MVC and programming in general.
I am having an issue with using layout in Asp.Net MVC 4. I have a main layout page. This page has all the jquery and javascript file reference at the bottom above the body close tag, and the css files in the head section below the title. I have another layout, _UserLayout, that use the _Layout file. When I reference the _UserLayout file in view, the scripts are not render. I have to also use script.render on the view. Why didn't the script render when I use the layout?
The regular Layout Page:
#using System.Web.Optimization;
#using Microsoft.Web.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>#ViewBag.Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="~/Content/bootstrap-switch.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
#Styles.Render("~/Content/css")
#RenderSection("head", required: false)
#RenderSection("style", false)
</head>
<body style="padding-top: 50px;" >
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar fa fa-user fa-3x">tester</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#Url.Action("Index", "Home")">Home</a>
<a class="navbar-brand" href="#Url.Action("About","Home")">About us</a>
<a class="navbar-brand" href="#Url.Action("Login","Account")">Login</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="settings-menu" class="dropdown">
<i class="fa fa-user fa-3x"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
#RenderBody()
</div>
<hr>
</div>
<footer class="navbar navbar-fixed-bottom footer">
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<p id="pFooter" class="pull-left">Designed By Example, Inc.</p>
<p class="pull-right">1.0.0.0</p>
</div>
</div>
</div>
</footer>
#Scripts.Render("~/MyBundle")
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap-switch.min.js"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
The _UserLayout page
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar fa fa-user fa-3x">tester</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button class="navbar-brand" id="editUser">Edit</button>
<button class="navbar-brand" id="addUser">Add User</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="settings-menu" class="dropdown">
<i class="fa fa-user fa-3x"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop4">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div>
#RenderBody()
</div>
<hr>
</div>
#RenderSection("Scripts", required: false)
#Scripts.Render("~/MyBundle")
This page is supposed to use the _UserLayout page. However, I had to add the #Scripts.Render("~/MyBundle") to the page.
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_UserLayout.cshtml";
}
<h2>User View</h2>
#Scripts.Render("~/MyBundle")
<script type="text/javascript">
$('#editUser').on('click', function () {
alert('test');
});
</script>
Am I doing something wrong here? Why did I have to add #Scripts.Render("~/MyBundle") to the file even though it has the layout? Is there something that I could have done to make sure that the script references render properly?
You include ~/MyBundle multiple times and this is causing problems.
Also you should use the Scripts section to render scripts in your views not like you did. Try using the following code:
For the layout - make bundles for all of the jquery and bootstrap scripts:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("Scripts", required: false)
And then in your view you can call your bundle like that:
#section Scripts{
#Scripts.Render("~/bundles/MyBundle")
}
Your bundles should look like something like this:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.8.2.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-switch.min.js"));
bundles.Add(new ScriptBundle("~/bundles/MyBundle").Include("~/Scripts/yourscript.js"));
Also just a note about "bootstrap-switch.min.js" - bundles minifies the js files on publish so this won't work with the already minified file. Try to use the full version of this bootstrap component and include it in a bundle like i showed you above.
Related
I'd like to have the flexbox cards view horizontally and vertically on any screen. I've done it like this and successfully figured out how to display the cards horizontally, but when you try viewing it on a mobile device or smaller screen, the cards remain horizontal. I tried using bootstrap card-deck that didn't help. When i used col d-flex justify-content-center, this allowed the cards to resize but they still don't stack vertically. In other instances i have just used card-deck like here and and its worked fine. Please any suggestions.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon"type="image/ico" href="/images/favicon/favicon.ico"/>
<meta name="viewport" content="width=device-width initial-scale=1" />
<environment include="Development">
<link href="~/lib/bootstrap//css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" >
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<a class="navbar-brand" asp-action="index" asp-controller="home">
<img src="~/images/employees.png" height="30" width="30" />
</a>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://digitalconsulting.cc/" target="_blank" >Digital Consulting.cc</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item">
<a asp-action="index" asp-controller="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-controller="home" class="nav-link">Create</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tools <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Software</li>
<li>Security</li>
<li>Mobile</li>
</ul>
</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<div>
#RenderBody()
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Scripts", required: true)
}
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Employee>
#{
ViewBag.Title = "Employee List";
}
<!-- div class="col d-flex justify-content-center"> -->
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
<div class="card-header">
<h3>#employee.Name</h3>
</div>
<img class="card-img-top" src="~/images/noimage.jpg"
asp-append-version="true" />
<div class="card-footer text-center">
<a asp-controller="home" asp-action="details" asp-route-id="#employee.Id"
class="btn btn-primary m-1">View</a>
Edit
Delete
</div>
</div>
}
</div>
Found this code on W3 Schools.
Swap out:
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
With this code:
<div class="row row-cols-1 row-cols-md-3 g-4">
#foreach (var employee in Model)
{
<div class="card h-100">
I'm trying to add a CardView in this template:
http://startbootstrap.com/template-overviews/clean-blog/
with this Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" 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="index.html">Start Bootstrap</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 navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Sample Post
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/home-bg.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading">
<h1>Clean Blog</h1>
<hr class="small">
<span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 18, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on August 24, 2014</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on July 8, 2014</p>
</div>
<hr>
<!-- Pager -->
<ul class="pager">
<li class="next">
Older Posts →
</li>
</ul>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="list-inline text-center">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
i need it in class=site-heading but,
we have to add something like http://materializecss.com/ style in this template or what we can do for use this material into this startbootstrap-clean-blog ?
Cheers!
I wouldn't recommend using both Bootstrap and Materializecss. I think the easiest way to go about this is to start off using materializecss as the framework and then select the style you like from the clean-blog template and implement them.
Materializecss has its own grid, which is really similar to the bootstrap grid. Then you just need to add the font-families and basic styling you found in the clean-blog css file.
I hope this helps.
I have a metisMenu in my ASP.Net MVC app, what I am looking to do is hide some options based on the users AD Group membership.
The app is currently using windows integrated authentication (Intranet Application).
What is the best way to do this?
I am presuming I could do a viewbag option which then if true or flase either shows or hides, but that would mean I would have to code something for every action?
The menu is part of the shared layout which is below
<!DOCTYPE html>
<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">
<title>CCL Support System</title>
<link rel="shortcut icon" type="image/png" href="~/img/favicon.png" />
#*CSS Declerations*#
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Content/ccl.less" rel="stylesheet" type="text/css">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/themify-icons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800' rel='stylesheet' type='text/css'>
#*JavaScript Declerations*#
<script src="~/Scripts/less.min.js" type="text/javascript"></script>
<script src="~/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="~/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/scripts/plugins/metisMenu/metisMenu.min.js" type="text/javascript"></script>
<script src="~/scripts/sb-admin-2.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/expand.js" type="text/javascript"></script>
</head>
<body class="ccl-body">
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top ccl-header" role="navigation">
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown navbar-profile">
<a style="z-index: 1" href="#" class="dropdown-toggle navbar-profile-icon" data-toggle="dropdown"><span class="ti-settings menu-icon"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Edit User Details</li>
</ul>
</li>
</ul>
</div>
<div class="logo-box">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="ccl-logo" href="#Url.Action("index", "Home" )"><img src="~/img/logo.png" width="75" height="73" alt="" /></a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Panel -->
<div id="page-wrapper" class="content">
#if (IsSectionDefined("title"))
{
<div id="page-block" class="page-block-header row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("title", false)
</div>
</div>
}
#if (IsSectionDefined("subtitle"))
{
<div id="page-block" class="page-block-two row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("subtitle", false)
</div>
</div>
}
#RenderBody()
</div>
</div>
<!-- Footer -->
<div class="navbar ccl-footer">
<div class="pull-right">
<p>© 2014 Computer Concepts Ltd</p>
</div>
</div>
</body>
</html>
If we look at the menu more closely (snippet below)
div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
I am looking to hide certain options within this
What would be the best way, would I need to create a custom authentication class?? if so does anyone have any good links on how to do this?
So the end result would be if user is in XYZ AD Group then show
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
Otherwise hide it.
You can use MvcSiteMapProvider's security trimming feature to do this in a few steps.
Configure the AuthorizeAttribute on your action methods (which supports roles/users/AD/forms authentication).
Install MvcSiteMapProvider via NuGet.
Create an hierarchy of your site in the Mvc.sitemap XML file and/or using .NET attributes and/or using dynamic node providers.
Add the #Html.MvcSiteMap().Menu() HTML helper to your layout page (or create your own Menu HTML helper that has similar functionality if it doesn't suit your needs).
Customize the templates in the /Views/Shared/DisplayTemplates/ folder to conform to your page layout.
Documentation Wiki: https://github.com/maartenba/MvcSiteMapProvider/wiki
Blog with Downloadable Demos: http://www.shiningtreasures.com/?tag=/MvcSiteMapProvider
MvcSiteMapProvider Questions on SO: https://stackoverflow.com/questions/tagged/mvcsitemapprovider
Full Disclosure: I am a major project contributor of MvcSiteMapProvider.
If you don't want to add a 3rd party library, this will take a bit of work to do. You would have to create your own HTML helpers that respond to the authorize attribute (or something similar). You could cannibalize the AuthorizeAttributeAclModule to determine whether to show or hide your HTML helper nodes.
I have tried numerous times to get Bootstrap to work, however even when I copy an example from Bootstrap's site, it still won't work properly as it does in the example. Here's the code I've uploaded to my server and yes, all the files are in the proper directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script> <![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Your classes were not correct.
You will have to make sure that since you are using a fixed-top navigation, you will want to put top margin or padding on items directly below them....
Here is a fiddle
<nav class="navbar navbar-inverse nav navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
With Bootstrap 3 navigation bar, I want to display Google place options on an input text field. Following is the screen shot for same:
As can be seen from screen shots, when navbar is fixed, options are displayed at the back. And, when navbar is static, options are displayed as expected. I want the options to be displayed properly when navbar is fixed.
I tried to point the code on bootply but, it's not working. Working code at JSFiddle. Also, code is as under:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
</head>
<body style="min-height: 2000px;">
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Contact</li>
<li class="dropdown">
Find <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" name="search" style="width: 20em;" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
<script>
window.onload = function() {
var options = {
types: ['geocode']
};
var inputField;
inputField = document.getElementsByName( 'search' )[0];
new google.maps.places.Autocomplete( inputField, options );
};
</script>
Please help.
Thanks much in advance!
This is because of the z-index of your elements. Try changing the z-index of .pac-container. Example: .pac-container { z-index: 9999; }.