I have developed a asp.net website(.aspx) using the bootstrap and the total look and alignments were good while debugging the code in my local system using IE10.
once the code is deployed in a asp.net server the button styles and the alignments of the controls in html table tags were totally different from the local site .
Please share your ideas for resolving the issue.
I have used the below tags in the master page.
<link href="Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap.min.css" runat="server" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap-theme.css" runat="server" rel="stylesheet" type="text/css" />.
.
.
.
.
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
thanks.
My issue got resolved.
all the resources were linked correctly but the issue was due to the default browser version the pages are getting rendered.
So I needed to add the below the meta tag in the master page. After which all the pages were loading fine.
[link] meta http-equiv="X-UA-Compatible" content="IE=edge" />
Thank you all for the suggestions and help.
You do not need both versions of bootstrap.css - for production server use the minified version(s).
For example:
In your master page:
<webopt:BundleReference runat="server" Path="~/Content/bootstrap.min.css" />
In your Bundle.Config.cs class:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/css").Include(
"~/Content/bootstrap.min.css"));
}
As regards setting the correct path in master page, this is a known bug and an easy way to get it right is to drag the CSS file from VS Solution Explorer to the head section of your master page in code view.
Related
My project is here
(Look for "Laptop" branch, and "IsolatorUI" internal project)
I need to work with external css file I just saved in wwwroot/css.
I have a schtml Home view file and I would like to use it there.
So far, everything I tried did not work. Even using the site.css which was already there was unsuccessful.
Please ignore the different languague on cshtml HomeView file.
How can I establish a css file link? There are many discussions and suggestions I found on the internet, but none of them worked for me.
It's really frustrating when such simple thing doesn`t work...
Basically there is a disturbing bug with css in .NET framework files, but eventually this code worked for me:
In my View:
#section Styles {
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
}
And in my Layout:
<head>
...
<link rel="stylesheet" type="text/css" href="~/css/site.css" />
#RenderSection("Styles", false)
</head>
I have a folder in my web application where aspx page and content page both are there and master page is in root location. I am using the css path which is loading fine in firefox console for aspx page but the same path is not loading for content pages checked in firefox console. Due to that some of the boostrap functionality not working.
Below is the css path for aspx page
<link href="MySheet.css" rel="stylesheet" type="text/css" />
and same path is used for content page
<link href="MySheet.css" rel="stylesheet" type="text/css" />
Need help in this.
The browser resolves the href url in a relative manner. If it's located in the root, you can place "/" in the beginning of the path, like this:
<link href="/MySheet.css" rel="stylesheet" type="text/css" />
this will instruct the browser look for the stylesheet in the root, regardless of the current page's relative path. But if you use a server-side technology, like ASP.NET, there's another way of specifying the application's root - "~/", in this case, though in this case you'd have to add runat="server" to the tag, so it would look like this:
<link href="~/MySheet.css" rel="stylesheet" type="text/css" runat="server" />
I have an ASP.NET web app hosted in a windows dedicated server.
In my app there are many folders. To simplify my problem let's say I have this scenario:
folder
default.aspx
css
js
I would like to setup default.aspx as my default page, meaning, when a user types domain.com, default.aspx is shown.
In order to do this, I edited my web.config file and it works.
The problem is styles and javascripts.
My default.aspx contains this:
<script type="text/javascript" src="js/xxxx.js"></script>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
So the styles and javascripts aren't found.
I really don't want to remove the folder and put everything in the root, and just moving the default.aspx page is not really an option, as I have a MasterPage.
use resolveUrl or a path from root to resolve locations of js and css
<script src='<%= this.ResolveUrl("~/js/xxxx.js") %>' type="text/javascript"></script>
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
If you're wanting to link to items, you can use the path from the website root. Just place a slash in front of the path.. like this:
<link rel="stylesheet" href="/css/webedit.css" type="text/css" />
You could use Page.ResolveUrl method to get correct paths:
<script type="text/javascript" src='<%= Page.ResolveUrl("~/js/xxxx.js") %>'></script>
<link href='<%= Page.ResolveUrl("~/css/styles.css")' rel="stylesheet" type="text/css" />
For more info see Specifying Paths for Resources.
EDIT: it's mentioned in the comment that this is not working for stylesheets. It's partially true. It won't work for server-side, but will for client-side elements.
It seems your <link> element is located inside a server-side <head> tag, this means ASP.NET treats <link> inside <head> as a server-side controls even if you didn't specify runat="server" attribute there. So you don't need to use a server-side construct in that case:
<link href="~/css/styles.css" rel="stylesheet" type="text/css" />
For ASP.NET WebForms and MVC projects I strongly reccomend moving to Client Dependency framework and let it handle your page dependencies.
For your two dependencies you simply add these declarations to the page:
<CD:CssInclude ID="CssIncludeStyles" runat="server" FilePath="~/css/styles.css" />
<CD:JsInclude ID="JsIncludeXXXX" runat="server" FilePath="~/js/xxx.js" />
This is already cleaner then calling this.ResolveUrl on each dep. declaration.
You can furthermore facilitate the declaration of dependencies by introducing mapped paths in the dependency framework (see documentation for how-to).
An easiest way to start with client dependency is to add it via NuGet to your ASP.NET web site project.
It ensures you never have duplicate dependencies on one page and gives you a control over how dependencies are ordered.
I am using asp.net 4 routing and im enjoying it so far. I have one problem only with my javascript files.
I am using a masterpage to add my css and javascript. The css is working fine however the javascript is not.
My links from my masterpage look like this
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="~/_styles/css/core.css" rel="stylesheet" type="text/css" />
<link href="~/_styles/css/facebox.css" rel="stylesheet" type="text/css" />
<script src="~/_styles/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="~/_styles/js/jquery.validate.js" type="text/javascript"></script>
<script src="~/_styles/js/facebox.js" type="text/javascript"></script>
<script src="~/_styles/js/corejs.js" type="text/javascript"></script>
Why does my css load correctly but the js doesnt?
This is question is bit old..but i faced same situation using ASP.NET 4.0 routing and referencing different js file or stylesheet when you move from different directory structure.. what i used to resolve is:
<script src='<%=ResolveClientUrl("~/js/fancybox/jquery.fancybox-1.3.4.js")%>' type="text/javascript"></script>
So key was using ResolveClientUrl
Hope this helps people in future.
Please check and make sure when you adding the link for your script.You just type the
<script src=" and Ctrl+Space then choose your file.If you can't find your project path,just try it to get in that path.Sometime,the file will not in that path when you may be copy & paste that file to your project path(not from your VS Project explorer).
you can use simply _styles/js and _styles/css.
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.