Can you please take a look at following LINK and let me know why the map is not acting responsive? I also have some issue with correct positioning and I appreciate if you can help me to fit the map correctly in page?
Here is my CSS and Html as well,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- JS Libs -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/routeboxer/src/RouteBoxer.js" type="text/javascript"></script>
</head>
<body>
<div class="row">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="nav-collapse collapse" id="spanClasses">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
<li>Link</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="map">
<div id="map_canvas"></div>
</div>
and css:
body { padding-top:42px; height: 100% }
#map_canvas { width: 99%; height: 100%;}
#map{ padding-left:10px; padding-right:0px;}
The map is not an image, it will not downsize while you downsize your browser
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">
In Safari when you scroll navbar starts to shake. Sometimes it shakes just a little, sometimes its all over the place.
However, when you resize the page to the point of collapsing and then resize it back to the full view, this shaky and glitchy stuff disappears completely.
It only occurs in Safari and works totally fine in other browsers. My problem is exactly like the one here Bootstrap fixed navigation jumps when scrolling. I have tried all known solutions like
.navbar-fixed-top {
-webkit-backface-visibility: hidden;
}
and
header {
-webkit-backface-visibility: hidden; backface-visibility: hidden; position: fixed; z-index: 1000; }
but this shaky stuff is still there.
Just scroll up/down slowly and you will notice it.
Here is the link - https://codepen.io/ceejaytaylor/pen/YvVqVK
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Alegreya+SC|Cormorant+Unicase|Tenor+Sans|Arsenal" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>
Normally when a Bootstrap navbar collapses the resulting menu is the full width of the screen. Is there any way to make it only as wide as the content and to the right of the screen?
It can be done in the following way--
working example
#media(max-width:767px){
.navbar-inverse {
width:50%;
margin-left: 50%;
}
}
<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.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid" id="nav-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">header</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
Sign Up
<!--Studier demo</button>-->
log-in</button>
<!--<li class="diff"><a class="nav_list" href="testlogin.php">--><!--<span class="glyphicon glyphicon-log-in"></span>--> <!--Sign Up</a></li>-->
another</button>
</ul>
</div>
</div>
</nav>
</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>
I do not get to align the brand logo and the text and image icons to the navigation bar to use bootstrap enviroiment.
The problem is the logo is outside botton of the navigation bar and the icon not align with the text.
Please could you help me?
Te code is this:
<!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">
<title>Web Testing</title>
<!-- INCLUDES -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="assets/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="assets/bootstrap-editable/css/bootstrap-editable.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="assets/bootstrap-editable/js/bootstrap-editable.js"></script>
</head>
<body>
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><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="http://www.google.es"><img src="assets/images/brandlogo.png"/></a></div>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active marges-opciones-right" ><i class="material-icons" style="font-size: 40px">work</i> Page1<span class="sr-only">(current)</span></li>
<li class="text-options marges-opciones-right"><i class="material-icons" style="font-size: 40px">collections</i> Page2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown marges-opciones-left"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false"><i class="material-icons" style="font-size: 40px" >face</i><span class="username"> Username </span><i class="material-icons" style="font-size: 40px" >list</i></a>
<ul class="dropdown-menu" role="menu">
<li><span class="glyphicon"></span><i class="material-icons">settings</i> preferències</li>
<li><span class="glyphicon"></span><i class="material-icons">lock</i> canviar password</li>
<li class="divider"></li>
<li><i class="material-icons" style="font-size:18px">power_settings_new</i> log out</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
The css is default of bootstrap.
Simply add these properties to align them in the same line:
.navbar-default .navbar-nav>li>a {
display: flex;
align-items: center;
justify-content: center;
}
Hope this helps,