More recently, I started using the MVC pattern 5 I like it but unfortunately I do not have a good experience with Bootstrap.
I want my application to look neat. (without super-additive, just clean and tidy). At the same time, I would like to work the same way (if possible) on all devices such as the iPhone, tablets, desktop PC and Mac, and Android.
I found the answer in your forum (here is the article), but I'm not sure if it will work properly.
Question:
Could someone tell me with which web browsers these solutions will work properly and what will not work properly, please.
Simply. What is the compatibility of the solution.
Environment:
MVC 5 with jQuery 2.1.1 , modernizr 2.8.3, Bootstrap 3.2.0, Razor 3.2.2
There is my _Layout page (almost default layout, I changed only sections fooder).
<!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")
</head>
<body>
<div class="navbar navbar-inverse 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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container" style="font-size: .8em">
<p class="navbar-text">
© #DateTime.Now.Year - My ASP.NET Application
</p>
</div>
</div>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
There is my css file Site.css in Content folder. Is default as well, I changed only size padding-bootom and padding-top (according to the recommendations bootstrap Link to documentation).
body {
padding-bottom: 70px;
padding-top: 70px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Related
I am new to rails development. I am creating one Rails app. In which I am using Bootstrap 4.0.0 beta. I have one navbar in particular div, (not on whole page). But problem is, dropdown is not working when I click on it. For that first I have to click on nav-brand first, then I can click on dropdown and it works. But it changes whole placings of navbar. and again if I click on nav-brand dropdown stops working.
I also tried putting it on whole page there is also same problem.
I have ruby-2.4.1, rails-5.1.3, bootstrap-4.0.0beta
Here is my /assets/stylesheets/application.css code
*= require bootstrap
And this is /assets/stylesheets/welcomeindex.css code
*= require bootstrap
*= require application
body, .jumbotron{
height: 100vh;
min-height: calc(100vh - 155px);
//overflow: hidden;
}
.jumbotron{
margin-bottom: 0px;
}
#media (max-width: 991px) {
.jumbotron{
height: 100%;
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #f5f5f5;
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
}
This application.js file:
//= require jquery
//= require jquery_ujs
//= require popper
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .
And this is welcomeindex.html.erb file:
<html>
<head>
<title> Fest Management </title>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'welcomeindex', media: 'all', 'data-turbolinks-track' => true %>
</head>
<body>
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
Brand
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
</body>
</html>
So where am I missing? It would be great help.
EDIT
after solving the issue of dropdown click, I am getting the issue with CSS of navbar. when i expand dropdwon, rather than poping out of navabar area, it increases the height of navbar and shows whole list in it.
here is the edited index.html.erb file. Along with the edits suggested I have completely removed CSS references and still it giving the same problem for CSS.
<div id="main-container" class="container-fluid">
<div class="row">
<div class="jumbotron col-lg-8 col-md-12">
</div>
<div class="jumbotron col-lg-4 col-md-12">
<nav class="navbar navbar-light bg-light">
<div class="navbar-header">
Brand
</div>
<div id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="dropdown show">
<a data-toggle="dropdown" class="dropdown-toggle" href="#" id="CategoryDD" aria-haspopup="true" aria-expanded="false">Messages <b class="caret"></b></a>
<ul class="dropdown-menu" aria-labelledby="CategoryDD">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
</div>
Adding to application.js
//= require jquery-ui
right after
//= require jquery
worked for me like a charm.
Hopefully, this will solve someone's issue too.
You shouldn't add body and html tags in a view. You also shouldn't add
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
All of this is usually already defined in application.html.erb which is the "skeleton" of your views.
Regarding your issue:
According to the documentation, you're missing an id on the a tag.
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Try removing any custom classes you've added and simply use this snippet. Should work out of the box if you leave all their elements.
If it still doesn't work, try running this in your console:
$('.dropdown-toggle').dropdown()
And let us know if there is an error.
You have added bootstrap but not jquery. Since bootstrap depends on jquery you must also add it. Before Rails 5, jquery used to be default in Rails app but Rails team removed it after Rails 5. If you want to use it then you should add this gem to your Gemfile. Here is the link https://github.com/rails/jquery-rails
Same issue, but solved with this kind of doing...
Did you overwrite bootstrap CDN or install any kind of bootstrap things like example of:
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
If you're having this kind of in application.html.erb then kindly remove all kind of this...
and clear all cdn links and add again bootstap link
Thank you.
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;
}
Getting the following console error when running a program after it's been deployed that I don't get when using VS2013:
Note: Updated Console Error output based on using Fiddler (this is the response from the 500 status code
readyState: 4, responseText: "<!DOCTYPE h...", status: 500, statusText: "Internal Se..."}
readyState: 4
responseText:
"<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error - My ASP.NET Application</title>
<link href="/Contentbug/css?v=MDbdFKJHBa_ctS5x4He1bMV0_RjRq8jpcIAvPpKiN6U1" rel="stylesheet"/>
<script src="/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
</head>
<body>
<div class="navbar navbar-inverse 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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>
<hr />
<footer>
<p>© 2015 - My ASP.NET Application</p>
</footer>
</div>
<script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
<script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModal-label">ATTENTION: Please Review Your Custom Email Before Sending</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
<button type="button" class="btn btn-primary" id="sendButton" data-dismiss="modal">Send</button>
</div>
</div>
</div>
</div>
<script>
$('[name="optradio1"]').on('change', function () {
....
});
</script>
...
</body>
</html>
status: 500
statusText: "Internal Server Error"
After reading a few threads about the BundleConfig I changed it so that my bundle name wasn't the same as one of my directory names but that still didn't work as I'm getting the same error, except with the updated name change.
Thoughts/suggestions?
BundleConfig
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Contentbug/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
Portion of _layout.cshtml
<!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("~/Contentbug/css")
#Scripts.Render("~/bundles/modernizr")
</head>
first do these things.
Deploy only compiled code.
hosting directory should be the root directory(Eg:www.stackoverflow.com),you should not host in sub-directory(Eg:www.stackoverflow.com/supraj).
Make sure that you host through FileZilla, a safe method.
If these doesnt work,if you sucessfully runs in localhost,then the only problem is with webconfig file
I want to prevent any client page in my MVC 5 application from being cached. My _Layout.cshtml page looks as follows. Notice the code in the head tag. Is this enough (and is it correct) to prevent caching on any page in my app? Or do I need to also add code on every page?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse 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"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="visible-lg visible-md" src="~/Images/WebBirderFatbirder.png" title="WebBirder">
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div id="bodyContentDiv" class="container body-content">
#RenderBody()
<hr />
<footer>
<br/>
<br />
<br />
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I'm using twitter bootstrap package in my application for my app layout.
I mostly use _BootstrapLayout.basic.cshtml as my default layout.
#using System.Web.Optimization
#using BootstrapSupport
#using NavigationRoutes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="#Styles.Url("~/content/css")" rel="stylesheet"/>
#RenderSection("head", required: false)
#RenderSection("jtable", required:false)
#Html.Partial("_html5shiv")
#* favicons and touch icons go here *#
</head>
<body>
<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="#" title="change in _bootstrapLayout.basic.cshtml">Sorama</a>
<div class="nav-collapse collapse">
<ul class="nav">
#Html.Navigation()
</ul>
</div>
</div>
</div>
</div>
<div class="container">
#Html.Partial("_alerts")
#Html.Partial("_validationSummary")
#RenderBody()
<hr>
<footer>
<p>© Sorama #System.DateTime.Now.ToString("yyyy")</p>
</footer>
</div>
#Scripts.Render("~/js")
#RenderSection("Scripts", required: false)
</body>
</html>
this gives me a page with nav bar
How can i show the Welcome message to the logged in User on the right corner of the nav bar? Something like Welcome ABC! and some log off option on side?
The only thing I know is i can get name of current user from User.Identity.Name but I don't know how to make it appear on menu bar.
I couldn't find something that could help me so I thought may be I could get it here.
Edit: After #User.Identity.Name being added in view
I added above mentioned code after <ul> tag with #html.navigation
and this is what I get
I get the Welcome Demo on menu bar(next to profile, difficult to see) but it is nothing like I expected.
Could something be done in DefaultRouteConfig provided by Bootstrap?
public class LayoutsRouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.MapNavigationRoute<ModuleController>("Module", c => c.Index());
routes.MapNavigationRoute<AccountController>("Hardware", c => c.Login());
routes.MapNavigationRoute<LayoutsController>("Profile", c => c.Starter())
.AddChildRoute<LayoutsController>("Change Password", c => c.Marketing())
.AddChildRoute<AccountController>("Add User", c => c.Register())
.AddChildRoute<LayoutsController>("Logout", c => c.SignIn())
;
}
}
After the div element that contains the nav, just add another div element and put the username in there.
Something like:
<div>#User.Identity.Name</div>
ul tag is styled for Bootstrap navigation so creating a
<li> #User.Identity.Name</li>
should look ok and you can use action link to user management instead of #