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; }.
Related
I have been trying this for the past few hours and it for some reason, my title won't move in the center. Is it because I am using yield or something? Also I tried putting it in the head tag using title tag but nothing happen so I have to use a h3 tag, but it won't let me move center.
I have tried many different method but still doesn't work such as:
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
padding-right
margin
Here is my code:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
On the h3 try using bootstraps built in class of text-center
Example:
<h3 class="text-center">#yield('title')</h3>
https://getbootstrap.com/docs/3.3/css/#type-alignment
I'm using bootstrap and have a simple menu with two items
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li>item1</li>
<li>item2</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script></body></html>
1) When the browser is expanded I see buttons item1, item2 on the right side and it's working well
2) When the width of the browser is smaller, menu is collapsed
collapsed menu button
3) But, after clicking on the menu button, item1 and item2 are not shown.
Any idea what is wrong?
Did you import the jquery and the bootstrap js in the html. They are required for the navigation to work in responsive mode?
If not, try adding both of them in the html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You need to import/add first the jquery and then the bootstrap js, because bootstrap js is dependent of the jquery.
Thanks a lot
I was linking to wrong *.js files :(
I didn't see any error, so I thought path were correct.
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.
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 -->
I have a basic page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<style>
body { padding-top: 70px; }
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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="#">Brand</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><span class="glyphicon glyphicon-envelope"></span></li>
<li><span class="glyphicon glyphicon-off"></span></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container">
<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Content</div>
</div>
</body>
</html>
When viewed on a small screen, as expected, the nav bar content collapses into a right-aligned button with a drop-down menu. Somewhat awkward, however, is that my envelope icon and off icon look somewhat awkward when they get collapsed into the small-screen drop-down menu. They look good, however, as simple icons with no text on the full-sized nav bar. Is there a way to have text applied to these icon links so that it will display in the collapsed menu but not in the full nav-bar? Thanks.
For exemple :
<span class="icon-bar">
<span class="visible-phone hidden-tablet hidden-desktop">myIconLabel</span>
</span>
The class visible-phone hidden-tablet hidden-desktop will show it on phone (collapsed menu), but not on tablet or desktop.