I am having some difficulty trying to style some of my controls in my application. I do not want the input to stretch accross the entire width of the screen, so I am trying to set the width. Below is my form.
I have a form like this:
#using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
<label>Email</label>
<input class="form-control input-width" placeholder="email" type="email" />
</div>
}
Here is my style "input-width":
.input-width{
width:300px !important;
}
And my BundleConfig:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate.min.js"));
// 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",
"~/Scripts/Model Scripts/Main/Main.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
bundles.IgnoreList.Clear();
BundleTable.EnableOptimizations = false;
}
And here is my master layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/css")
</head>
<body>
#{Html.RenderPartial("_NavBar");}
<div class="container" id="MainBody">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
Why is none of my styles added to my controls? Is my order in which I load my style sheets wrong?
As far I understand styles which are expected to override default bootstrap values are located in 'Site.css'. Try to add it without bundle usage, like:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/css")
<link rel="stylesheet" href="/Content/Site.css">
</head>
<body>
#{Html.RenderPartial("_NavBar");}
<div class="container" id="MainBody">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
I suppose that ASP Bundle engine renders your css earlier that bootstrap's.
I am not quite sure why, but changing the order of "#Styles.Render("~/Content/css")" and "#Scripts.Render("~/bundles/modernizr")" seems to have solved my issue. My Master Layout file looks like this now.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#{Html.RenderPartial("_NavBar");}
<div class="container" id="MainBody">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", false)
</body>
</html>
Il you add .form-control this add to the input display: table-cell forcing the width to 100%.
If you don't want to delete this class, check the specicficity of your css rules, try this:
.form-group .form-control.input-width
Related
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
This is my _ViewStart.cshtml:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
This is my _Layout.html:
<!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>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Lots of tags for dependencies -->
</head>
<body>
<div class="container body-content">
#RenderBody()
<div class="divider row top-buffer"></div>
<footer>
<p>© #DateTime.Now.Year - MyApp</p>
</footer>
</div>
</body>
</html>
This is my Index.cshtml:
#Html.RenderApiEndpoints()
<script type="text/javascript" src="~/Content/index.js"></script>
<div ng-app="app">
<div ng-view ></div>
</div>
I am fetching Index.cshtml like:
public class HomeController : Controller
{
[Route("")]
public ActionResult Index()
{
return View();
}
}
Since I am using client-side routing with Angular $routeProvider, I am always in Index.cshtml. Furthermore, I don't need a Layout, I just need my Index.cshtml.
How can I avoid using a Layout-File and directly start with my Index.cshtml when going to localhost in browser?
You can make Layout null then you will just see Index.cshtml view
#{
Layout = null;
}
Use null layout in the following way:
#{
Layout = null;
}
I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
I our project we are working with different bounded context and I am assign to one area of the domain.
We have _MasterLayout.cshtml that is our default layout in which doesn't implement twitter bootstrap and I have a _SubLayout.chstml in which I implement bootstrap.
The problem is that the style from _MasterLayout was override by the style from the _SubLayout.
Edit: Here is how I render the view.
~/Views/_MasterLayout.cshtml - no bootstrap implementation
<!DOCTYPE html>
<html>
<head>
#RenderSection("styles", false)
</head>
<body>
<div class='siteMapMenuItems'></div>
#RenderSection("SubSection")
#RenderBody()
</body>
</html>
~/Views/_SubLayout.cshtml
# {
Layout = "~/Views/_MasterLayout.cshtml";
}
#section styles
{
<link rel="stylesheet" type="text/css" href="#Url.Content("~/Areas/xxx/css/bootstrap.css")" />
}
<div>
#section SubSection {
<h1>Title</h1>
}
#RenderBody()
#section ContentSection{
#RenderSection("ContentSection")
}
</div>
~/Views/Content.cshtml
# {
Layout = "~/Views/_SubLayout.cshtml";
}
<div>
<p>Main Content</p>
#section ContentSection{
<div>Footer<div>
}
</div>
Is there a way to prevent the _MasterLayout to adopt the bootstrap from the _SubLayout?
I'm new to Bootstrap but i'm really confused here. I started new Maven Web Project and wanted to put Bootstrap into jsp file, but after running page on Tomcat columns appear on top of each other when they're supposed to be inline. What am I doing wrong?
<%# page language="java" pageEncoding="UTF-8" session="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/resources/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/resources/js/bootstrap.min.js"></script>
</body>
</html>
Does this works for you?
JSFiddle
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
You can ignore the code above just a copy&paste
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
I think you have defined a wrong path location for bootstrap. This means the browser receives an HTTP 404 when it requests bootstrap files. You should have the name of the project/application before the path to your css. If you don't have the project name, Tomcat will direct the request to the ROOT folder. This is how bootstrap link should be:
<link href="/project/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Also, you can dynamically get your project name, or the context path, using this code below:
<link href="/${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
A side suggestion... since you are using Maven, why don't you use WebJars? It is really powerful and well documented.