When I'm adding css classes or changing bootstrap classes on view html in ASP.NET MVC, nothing happens.
CSS stylesheet
.icon {
margin-top: 8px;
border: 1px solid white;
border-radius: 100%;
}
.titleLibrary{
color: gray;
}
View html
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" class="icon" />
</a>
#Html.ActionLink("Library", "Index", "Home", new { area = "" }, new { #class = "titleLibrary" })
screenshot
but when I use style in html everything is fine
<a href="#Url.Action("Index","Home")">
<img src="#Url.Content("~/Icons/bookIcon.jpg")" width="50" style=" border: 1px solid white; border-radius: 100%;" />
</a>
If you are not clearing the cache, then this may be a reason for not reflecting the updated CSS style in your Index or any other page. So try to clear the cache and then try to update the style. For clearing cache use Ctrl+F5. This will helps to clear the cache. The another solution, if you are keeping the style.css file separately, then please give the reference link at the top the Index page, then refresh and rebuild the page and try again.
<head>
<link href="~/Content/background.css" rel="stylesheet" />
</head>
Hey Ivan have you made sure to render your styles on your view you are using? For instance if you are using a layout page you usually would render your style bundle or sheet at the head of the layout page.
I'll give you an example
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Project System</title>
#Styles.Render("~/content/site-bundle")
#RenderSection("styles", false)
</head>
Here you can see me render my style bundle. In this case you can instead render your stylesheet you have.
Make sure, If that css file is in the same directory (or folder) as the html page, it's as easy as typing in "style.css" with the name of the css file matching whatever you called yours. I just used style.css to simplify things. However, if the css file is in another directory (say inside a folder called css) you would need to type out the path to it relative to the html document. In this case, you'd type "css/style.css". Generally, it's a good idea to store your css files in a css folder.
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
Related
Trying to learn how to link my css into the Home index file. Cant believe I'm not getting this to work. Hope you can help me. So, I've created a standard mvc core project, in the views and homefolder, I'm creating a new stylesheet, with same name as index, Index.cshtml.css, its not getting nested as I saw on some tutorial. But its there,
Rest of the code is like this:
This is the css file
.helloWorld {
font-family: Arial;
font-size: 60px;
font-weight: bold;
color: blue;
}
Here is the head in the Layout file
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VueDemoApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/VueDemoApp.styles.css" />
</head>
All I have added is the the VueDemoApp styles, where am I doing wrong here?
Oh, also the Index.cshtml file:
<div>
<h1 class="helloWorld">Hello World!</h1>
</div>
As you can see, nothing special with this project just trying to understand how to get the css to work, I don't have a problem with css, only linking the freakin thing :'D
To be nested, try to name it Index.css instead of Index.cshtml.css.
I moved the css file into root/css and then linked it and now it works!
I'm relatively new to ASP.NET MVC and Razor. We've been modifying and developing based on existing code. Thus, there is a lot of duplication (ugh!). So I started looking at Partial pages and learning about Sections. I followed these tutorials but I'm still a bit confused.
ASP.NET MVC 3: Layouts and Sections with Razor
Various ways of using Shared Layout in ASP.NET MVC
Optional Razor Sections with Default Content
Razor, Nested Layouts and Redefined Sections
I've been able to create Sections with Partials in them. My question is:
While one section will always change upon user selection, I may not want to blow away the content section. I may just want to add a new tab based on the Sub Menu item selected by the user.
The plan is to have a _Layout that contains the _Header and a Section for the SideBar (Sub Menu). Based on the user's selection in the _Header, the Sub Menu list of options will change in the SideBar and the Content will be a container that can contain a Grid when the Home button is selected, or it can contain a Tabbed view for the other buttons.
The Problem
Let's say the user selects Billing from the _Header and then selects two items from the Sub Menu on the left; in the Content section, two tabs should display (one for each item selected in the Sub Menu). Then, if the user selects Reports from the _Header, the SideBar should changed to display the appropriate Sub Menu items for Reports but I do not want the two tabs for Billing to be blown away. Instead, I want to add additional tabs for each item the user selected from the Reports Sub Menu.
Below is the code from the demo, which shows how I put the Partial page code in the Sections. Obviously I'm still confused over the approach that I should take to accomplish the layout I need.
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/Scripts/jquery-1.10.2.min.js")
</head>
<body>
<div id="header">
<h1>My Site Header</h1>
</div>
#if (IsSectionDefined("SideBar"))
{
<div id="sidebar">
#RenderSection("SideBar")
</div>
}
<div id="content">
#RenderBody()
</div>
<div id="footer">
<p>Site Footer - © Santa Clause</p>
</div>
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
#Html.Partial("HomeContentPartial")
#section SideBar {
#Html.Partial("HomeMenuPartial")
}
.CSS
#header {
background-color: #5c87b2;
color: white;
padding: 1px; }
#content {
float: left;
margin: 10px; }
#sidebar {
float: left;
margin: 10px;
padding: 10px;
border: dotted 5px red;
width: 180px; }
#footer {
text-align: center;
clear: both; }
HomeMenuPartial.cshtml
<p>This sidebar has "Home Page" specific content.</p>
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
<p>The time is: #DateTime.Now.ToShortTimeString()</p>
HomeContentPartial.cshtml
<h2>Welcome to my Site</h2>
<p>This is our home page.</p>
<p>Not super exciting is it?</p>
<p>Yada, Yada, Yada.</p>
I am making an asp website with bootstrap. I am wondering how do I make all asp button widths the same instead of padding the text with spaces. I created an alternate css file and used the css class tag. am i missing something?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs" Inherits="SCBA.admin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Admin</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<style>
.box {
border:1px solid grey;
background-color:#d3d3d3;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script src="../Scripts/jquery.min.js"></script>
<script src="../Scripts/boostrap.min.js"></script>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Administration" /> <br />
<asp:Button ID="Button3" runat="server" cssClass="button1" onclick="Button3_Click" Text="Resource" />
</div>
</div>
</div>
</form>
</body>
</html>
Here is my CSS
.button1
{
width: 200px;
}
Depending on which browser you are using, learn to use the browser tools so you can inspect the HTML and CSS elements yourself.
Here are some steps to get you in the right direction:
Look at the Bootstrap documentation for the button classes then override the relevant Bootstrap CSS class in your custom style sheet to change its appearance. Also, do NOT use fixed widths in responsive sites, use percentages. It looks like you are not leveraging the Bootstrap classes at all for this
.NameOfBootstrapButtonClass
{
width: 25%;
}
Move your script links to just before the closing body tag
Remove all inline CSS and CSS links - then from Solution Explorer drag the CSS files you need into the head section of your ASP page. This guarantees your links are correct but only applies if you are using VS
Do not use minified CSS files in development - when deploying you will have all your min versions bundled up for performance. Personally, I comment out much of the bundling in the RegisterBundles method of the BundleConfig class when working locally
If you're building a site you are going to have a lot of redundancy without the judicious use of master pages and user controls
You have no viewport tag in the head so your site will not be responsive in any mobile browser
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are supporting IE9 and IE8, you need to reference the Modernizr library. You need to give some thought to which browsers you need to support
Remove the xmlns namespace attribute from the html tag
So this is another question regarding valid rendering google maps in WinForms WebControl.
There are two solutions to the problem, one of them is to add specific registry keys (See this article) and another one is to use <meta http-equiv="X-UA-Compatible" content="IE=edge"> (if you own the HTML of the displayed page) (See this article).
Since we host our google-maps html and scripts files on our own servers, we can modify the html file. So we have tried however this causes WebControl to not render html file at all (gray space is displayed). On the other hand the IE works fine.
The workstation we test on has installed IE 11.
Below is our html file. Did we do something wrong? Anyone encountered similar behaviour? How to solve this?
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex" />
<title>Mapa</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.22&libraries=geometry&sensor=false"></script>
<!-- multiple javascript files -->
<script type="text/javascript">
var map;
var panorama;
function initialize() {
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
panorama = map.getStreetView();
/* some init functions */
}
</script>
</head>
<body style="margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
Sorry for <!-- multiple javascript files --> and /* some init functions */ but I had to cut these parts out. These are only <script type="text/javascript" src="..."></script> lines and 2 function calls in second one. If those 2 parts are really important and will lead to solve the problem I can try to post them.. somehow.
Mind that whatever we use in content="IE=edge" part, edge, or any other version number the result is the same.
Below is the screen of the WebControl when we use the X-UA-Compatible.
(Obiviously the red text is made in snipping tool ;))
I work with the team which created another browser component – DotNetBrowser.
I think this component will be helpful for your case since it is based on the Chromium engine and should render the Google Maps without any issues.
I'm developing a mapping application (VS2008 C#) and have my map window (Esri ADF MapControl) displayed within my main aspx.
I'm now compiling a print template with another aspx page which will display and print the current map from the main aspx.
Normally I'd use a Frame tag to dispay the main aspx in my print template however I'm just interested in copying over the map DIV.
You can try do it using jquery:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<div id="mydiv"></div>
<script>
$("#mydiv").load("mypage.html");
</script>
</body>
</html>
Source: http://api.jquery.com/load/