This question already has answers here:
top nav bar blocking top content of the page
(20 answers)
Closed 6 years ago.
I have a problem using Bootstrap's grid system, what's happening is that my nav bar is seemingly covering up the other content, which is intended to be underneath it!
I'm using ASP.NET MVC in this Project, so all I've done is set up a Layout page like this;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>You Hire it Ltd</title>
<script src="~/scripts/jquery-2.2.4.js"></script>
<script src="~/scripts/bootstrap.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-md-8">
<div class="navbar-header">
<a class="navbar-brand" href="#">
You Hire It
</a>
</div>
<ul class="nav nav-pills">
<li class="active">#Html.ActionLink("Home", "Index")</li>
<li>#Html.ActionLink("About", "About")</li>
<li>#Html.ActionLink("T&Cs", "Legal")</li>
<li>#Html.ActionLink("Contact us", "Contact")</li>
</ul>
</div>
<div class="col-md-offset-2"></div>
<div class="col-md-2 pull-right">
<div class="container-fluid">
<div class="ButtonWrapper">
<button class="btn btn-success">Sign up/Login</button>
</div>
</div>
</div>
</nav>
</header>
</div>
</div>
#RenderBody()
</body>
</html>
and the page in question is like this;
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h1>Hello</h1>
</div>
</div>
</div>
I'm not entirely sure what's causing this behavior, any pointers would be greatly appreciated.
Thanks guys :)
You need to add padding to the top. From the Bootstrap docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body.
So in your style.css you need..
body {
padding-top:70px;
}
Related
I have an accordion written like this
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="editTournamentAccordionWrapper">
<div class="accordion-body">
<iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
When i click the first time on the Accordion header, the accordion won't open and the following exception will be threw
Uncaught TypeError: 'querySelectorAll' called on an object that does not implement interface Element. selector-engine.js:18:59
Any idea of the reason? As far as I noticed, this is the minimum code I had to wrote in order to make the bug present
TLDR: A # is missing in the data-bs-parent attribute.
According to the Bootstrap documentation, the data-bs-parent accepts a
selector | jQuery object | DOM element
When you pass in data-bs-parent="id" for the attribute, it is plain text hence belongs to none of the categories. As a result you get the Uncaught TypeError: Illegal invocation
Working example:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div id="editTournamentAccordionWrapper" class="accordion accordion-flush">
<div class="accordion-item">
<h2 class="accordion-header" id="editTournamentAccordionHeading">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#editTournamentAccordion" aria-expanded="false" aria-controls="editTournamentAccordion">
Card title
</button>
</h2>
<div id="editTournamentAccordion" class="accordion-collapse collapse" aria-labelledby="editTournamentAccordionHeading" data-bs-parent="#editTournamentAccordionWrapper">
<div class="accordion-body">
Card Body
<!-- <iframe class="w-100" style="height: 1024px;" src="www.example.com"></iframe>-->
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<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.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
I tried to implement external panel on JQM 1.4.5 but I did'nt success to display it correctly on my web app. JQM 1.4.5 doc about external panel
My code is written below.
Thanks for helping,
Clément
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some content
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
No text
</div>
<div role="main" class="ui-content">
some other content
</div>
</div>
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-theme="a">
<div class="ui-panel-inner">
<ul data-role="listview">
<li data-icon="home">
<a id="menu-home" href="index.php#home">Home</a>
</li>
<li data-icon="user">
<a id="menu-account" href="#">Account</a>
</li>
<li data-icon="gear">
<a id="menu-settings" href="#">Settings</a>
</li>
<li data-icon="mail">
<a id="menu-contact" href="#contact">Contact</a>
</li>
</ul>
</div>
</div><!-- /mypanel -->
</body>
</html>
You need to enhance the panel in java-script. In $(document).ready write the following code:
$('#mypanel').enhanceWithin().panel();
I need a clickable "table" in my app.
The closest I have gotten is using listviewer and links in combination with grid.
The example below is what I need (a clickable tablerow and a separate button to the right).
My problem is that I cant line up the "body-columns" with the "header-titles" becuase the button in my "table body" offsets the grid.
http://jsfiddle.net/lokkin/p9M8p/3/
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<ul data-role="listview" data-split-icon="gear" data-inset="true">
<li data-role="list-divider">
<div class="ui-grid-d">
<div class="ui-block-a">TRK</div>
<div class="ui-block-b">STATUS</div>
<div class="ui-block-c">NR</div>
<div class="ui-block-d">PFIX</div>
<div class="ui-block-e">EHNR</div>
</div>
</li>
<li> <a href="#Select" class="ui-grid-d">
<div class="ui-block-a">
TRUCK1
</div>
<div class="ui-block-b">
123
</div>
<div class="ui-block-c">
ABC123
</div>
<div class="ui-block-d">
456
</div>
<div class="ui-block-e">
789
</div>
</a>
Details
</li>
</ul>
</div>
</body>
</html>
Just add right padding to the divider to match the listitems:
.ui-li-divider{
padding-right: 56px !important;
}
Updated FIDDLE
I have a twitter bootstrap nav bar, but evertime I navigate on a link it is clearly reloading the navbar with everything else. Isn't it not supposed to do that? I would like it if it didn't. I'm not sure maybe if I'm doing something wrong in my _Layout or not. Any ideas on why my navbar could be reloading?
<link href="../../bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/dt-min.js")" type="text/javascript"></script>
<link href="../../Content/Reflection.css" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="float-left" style="width:315px">
<p class="site-title">#Html.ActionLink("Kinfolk", "Index", "Home", new { #style = "color:Orange" })</p>
</div>
<div class="float-center">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu" class="nav">
<li>
<div class="reflection">
<a href="#Url.Action("AllWallPost", "Home")" title="Home">
<img src="../../Images/home (1).ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#Url.Action("UserProfile", "UserProfile")" title="My Profile">
<img src="../../Images/user.ico" />
</a>
</div>
</li>
<li>
<div class="reflection">
<a href="#" title="Events">
<img src="../../Images/calendar_2.ico" />
</a>
</div>
</li>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
<div class="float-right">
<ul id="social">
<li>Facebook</li>
<li>Twitter</li>
</ul>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
From the code you provided, it is normal that the page reloads when you click on a link.
If you want the page to change without reloading everything, you'll have to use some Ajax (JavaScript) and a combination of Request.IsAjaxRequest() (controller) and PartialView (view).
There are lots of resources out there with those keywords.