This question already has answers here:
Navbar dropdown (collapse) is not working in Bootstrap 5
(11 answers)
Bootstrap 5 navbar button collapse doesn't work
(1 answer)
Closed 1 year ago.
Tried several things - no errors related to script calls but nothing is collapsing. Based on every tutorial that I can find this should be working.
What am I doing incorrectly?
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<div class="container">
<button class="btn btn-success collapsed" type="button" data-toggle="collapse" data-target="#content" aria-expanded="false" aria-controls="collapse">
Test Me
</button>
<div class="collapse" id="content">
Testy test test text that was collapsed.
</div>
</div>
Try this:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Tester</title>
</head>
<body>
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Test Me
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Testy test test text that was collapsed.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
It should be data-bs-toggle="collapse", data-bs-target="#content.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Tester</title>
</head>
<body>
<div class="container">
<button class="btn btn-success collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content" aria-expanded="false" aria-controls="collapse">
Test Me
</button>
<div class="collapse" id="content">
Testy test test text that was collapsed.
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Your attributes are incorrect.
You need to add -bs- to these two:
data-bs-toggle="collapse"
and
data-bs-target="#content"
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<div class="container">
<button class="btn btn-success collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content" aria-expanded="false" aria-controls="collapse">
Test Me
</button>
<div class="collapse" id="content">
Testy test test text that was collapsed.
</div>
</div>
Related
The HTML spat out from a view has a lot of empty spaces and empty lines.
What and where do I need to type to make grails not to generate the empty spaces or empty lines?
Thanks!
Just for example. I have an empty domain. And then use generate-all to create all the controller and view. This is the HTML spat out from the index.gsp. If you use your mouse to highlight the HTML, you will see a lot of empty spaces.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
NewGroovyClass List
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="icon" type="image/x-ico" href="/assets/favicon.ico"/>
<link rel="stylesheet" href="/assets/bootstrap.css?compile=false" />
<link rel="stylesheet" href="/assets/grails.css?compile=false" />
<link rel="stylesheet" href="/assets/main.css?compile=false" />
<link rel="stylesheet" href="/assets/mobile.css?compile=false" />
<link rel="stylesheet" href="/assets/application.css?compile=false" />
<meta name="layout" content="main"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark navbar-static-top" role="navigation">
<a class="navbar-brand" href="/#"><img src="/assets/grails.svg" alt="Grails Logo"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" aria-expanded="false" style="height: 0.8px;" id="navbarContent">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</nav>
Skip to content…
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="/">Home</a></li>
<li>New NewGroovyClass</li>
</ul>
</div>
<div id="list-newGroovyClass" class="content scaffold-list" role="main">
<h1>NewGroovyClass List</h1>
<div class="pagination">
</div>
</div>
<div class="footer row" role="contentinfo">
<div class="col">
<a href="http://guides.grails.org" target="_blank">
<img src="/assets/advancedgrails.svg" alt="Grails Guides" class="float-left"/>
</a>
<strong class="centered">Grails Guides</strong>
<p>Building your first Grails app? Looking to add security, or create a Single-Page-App? Check out the Grails Guides for step-by-step tutorials.</p>
</div>
<div class="col">
<a href="http://docs.grails.org" target="_blank">
<img src="/assets/documentation.svg" alt="Grails Documentation" class="float-left"/>
</a>
<strong class="centered">Documentation</strong>
<p>Ready to dig in? You can find in-depth documentation for all the features of Grails in the User Guide.</p>
</div>
<div class="col">
<a href="https://grails-slack.cfapps.io" target="_blank">
<img src="/assets/slack.svg" alt="Grails Slack" class="float-left"/>
</a>
<strong class="centered">Join the Community</strong>
<p>Get feedback and share your experience with other Grails developers in the community Slack channel.</p>
</div>
</div>
<div id="spinner" class="spinner" style="display:none;">
Loading…
</div>
<script type="text/javascript" src="/assets/jquery-3.3.1.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/bootstrap.js?compile=false" ></script>
<script type="text/javascript" src="/assets/popper.min.js?compile=false" ></script>
<script type="text/javascript" src="/assets/application.js?compile=false" ></script>
</body>
</html>
This bootstrap alert button is not closing the alert. please help.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Did you include these in your head tag?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
Working fine for me...
<html>
<head>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those
fields below.
<button
type="button"
class="btn-close"
data-bs-dismiss="alert"
aria-label="Close"
></button>
</div>
</body>
</html>
the mdl class mdl-layout__content is blocking my tooltip from showing in my graph. I made a codepen that shows the problem. Are there style settings I can make to still use this class for my nav, but show my tooltip.
Link to CodePen that shows the issue
here's my HTML code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>New UI 07052017</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<!-- Material Design Lite
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap-3.css" type="text/css" media="screen">
<link href="css/bootstrap-material-design.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> **** updated to 1.6.1 on 6/29/17-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<!-- <script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script> -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script src="js/angular-toggle-switch.min.js"></script>
<script src="js/angularScripts.js"></script>
<!-- JustGage tools for the dashboard -->
<script src="js/justgage.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Pellet Pirate">
<link rel="apple-touch-icon-precomposed" href="images/apple-icon-114x114.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/apple-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/pelletpirate-icon-32x32.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body ng-app="PelletPirate">
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">smoker</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">whatshot</i>Manage a Cook</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i>
<span class="visuallyhidden">Help</span></a>
</nav>
</div>
<!-- *********************************************************************************************************************-->
<!-- need help here. I'm not sure what settings to make in CSS to enable the tooltip popup to show. If I comment out the -->
<!-- the mdl-layout__content class then the tooltips show but my graph now drifts left behind my left nav -->
<!-- *********************************************************************************************************************-->
<main class="mdl-layout__content mdl-color--grey-100">
<!-- <main class="mdl-color--grey-100"> -->
<div class="mdl-grid demo-content">
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<div class="plot-container">
<div id="temp-placeholder" class="plot-placeholder"></div>
</div>
</div>
<div class="row" id="ControlsRow">
<div class="mdl-cell mdl-cell--12-col">
<div class="plot-container">
<div id="controls-placeholder" class="plot-placeholder"></div>
</div>
</div>
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">"It's a Pirate's life for me."</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
</div>
</body>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyD3_xJ0aYVK3VwjuuliOdb6t5wbbi87RB8",
authDomain: "pelletpirate.firebaseapp.com",
databaseURL: "https://pelletpirate.firebaseio.com",
projectId: "pelletpirate",
storageBucket: "pelletpirate.appspot.com",
messagingSenderId: "731610976061"
};
firebase.initializeApp(config);
var Ref = firebase.database().ref()
</script>
<script src="js/scripts.js"></script>
<script src="js/Cscripts.js"></script>
</html>
I figured it out: z-index to bring the tooltip to the forefront. In CSS:
#tooltip {
z-index: 1;
}
I've implementet a bootstrap 3.0 theme in my MVC-aplication. But the theme only works on my http://localhost:00000/. If I type in the browser like:
http://localhost:00000/home/index
or something like that the css and javascript doesn't work. But I get the html för it. All my code for like the: head, header, footer ect.. I have in my _Layout.cshtml file. I can't see the problem here why it's not working?
It ONLY works on my http://localhost:00000/.
NOT on the: http://localhost:00000/home/index (witch points to the exact same (controller/method/view as the fisrt one)
This is how my _layout.cshtml looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!--admintemat test-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="assets/jvector-map/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<link href="css/clndr.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<!--header start-->
<header class="header fixed-top clearfix">
<!--logo start-->
<div class="brand">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<div class="sidebar-toggle-box">
<div class="fa fa-bars"></div>
</div>
</div>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification goes here -->
</div>
<div class="top-nav clearfix">
<!--search & user info goes here-->
</div>
</header>
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a class="active" href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
</aside>
<!--sidebar end-->
<!-- sidebar menu end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--main content goes here-->
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</section>
</section>
<!--main content end-->
#*</div>*#
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- ADMINTEMAT TESTPlaced js at the end of the document so the pages load faster -->
<!--Core js-->
<script src="js/lib/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script src="js/accordion-menu/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/scrollTo/jquery.scrollTo.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.js" type="text/javascript"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot- chart/excanvas.min.js"></script><![endif]-->
<script src="assets/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="assets/skycons/skycons.js"></script>
<script src="assets/jquery.scrollTo/jquery.scrollTo.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/calendar/clndr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"> </script>
<script src="assets/calendar/moment-2.2.1.js"></script>
<script src="js/calendar/evnt.calendar.init.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-us-lcc-en.js"></script>
<script src="assets/gauge/gauge.js"></script>
<script src="assets/easypiechart/jquery.easypiechart.js"></script>
<script src="assets/sparkline/jquery.sparkline.js"></script>
<script src="assets/flot-chart/jquery.flot.js"></script>
<script src="assets/flot-chart/jquery.flot.tooltip.min.js"></script>
<!--<script src="assets/flot-chart/jquery.flot.pie.js"></script>-->
<script src="assets/flot-chart/jquery.flot.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.pie.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.animator.min.js"></script>
<script src="js/dashboard.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<!--ADMIN TEMAT TESTscript for this page-->
</body>
</html>
If you open your console, you'll see several 404 errors for each of your css assets and probably afew of your js assets. This is because you're using relative file paths. relative file paths look within the folder of the current file, therefore once you're viewing a file in a sub folder, the relative paths no longer target the correct files. To fix it, use an absolute url.
/css/bootstrap-reset.css
the rest will need to be updated too.
Hi I am trying to render a bootstrap modal popup window based login for that I have included
in my _header.html.erb file as below
<div class="modal hide fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<%= link_to "View", signin_path %>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
But I was not displaying any signin button on the screen But when I try to see source code of my web page there I have having the link as shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Skillable App </title>
<!-- Javascripts
================================================== -->
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/bootstrap-transition.js?body=1"></script>
<script src="/assets/bootstrap-affix.js?body=1"></script>
<script src="/assets/bootstrap-alert.js?body=1"></script>
<script src="/assets/bootstrap-button.js?body=1"></script>
<script src="/assets/bootstrap-carousel.js?body=1"></script>
<script src="/assets/bootstrap-collapse.js?body=1"></script>
<script src="/assets/bootstrap-dropdown.js?body=1"></script>
<script src="/assets/bootstrap-modal.js?body=1"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1"></script>
<script src="/assets/bootstrap-tab.js?body=1"></script>
<script src="/assets/bootstrap-tooltip.js?body=1"></script>
<script src="/assets/bootstrap-popover.js?body=1"></script>
<script src="/assets/bootstrap-typeahead.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<!-- Stylesheets
================================================== -->
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-responsive.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/companyrating.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/global.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/pages.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/user_session.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/users.css?body=1" media="screen" rel="stylesheet" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="/UOprUnr0t8ItxVtX1Yc1GaaX3zgs2/kCFicNAtWM68=" name="csrf-token" />
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
SAMPLE
<nav>
<ul class="nav pull-right">
<li>Companies_list</li>
<li><div class="modal hide fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Login</h3>
</div>
<div class="modal-body">
View
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div></li>
</ul>
</nav>
</div>
</div>
And I have also used <%= render "/sessions/new.html.erb"%> but I am getting the following error
ActionView::MissingTemplate in Pages#companies_list
Showing /home/seshendra/rails_app-master/app/views/layouts/_header.html.erb where line #22 raised:
Missing partial sessions/new.html.erb with {:locale=>[:en], :formats=>[:html], :handlers=>[:erb, :builder, :raw, :ruby, :jbuilder, :coffee]}. Searched in:
* "/home/seshendra/rails_app-master/app/views"
<%= render "/sessions/new.html.erb"%>
So can any one please tell me how to solve it. I am totally a newbie I have gone through this website http://raycoding.net/2012/10/30/creating-social-network-on-ruby-on-rails-day-5-navigationstwitter-bootstrap-stylesjquery-part-2/
try removing first slash ('/') on path
use
<%= render "sessions/new.html.erb" %>