I am playing with ASP.NET MVC default project.
I can see that it uses bootstrap. However, when I run the project I don't see something like:
<link href="/Content/bootstrap.css" rel="stylesheet"/>
as I would expect.
Instead I see something like:
<link href="/Content/css?v=LzveySGbzre5hK6VV4ZexwQl1hUNcljL4UffuTMZH8g1" rel="stylesheet"/>
which is actually the minimized bootstrap.
why is that???
Also, I'm inspecting the input field in the default forms (register, login) and I can see that there is the css rule:
input, select, textarea {max-width: 280px;}
However, when I perform searches on all my solution I can not find anywhere which contain such rule: max-width: 280px (I can't even find the string "280px")
What is going on? where did this 280px appears from?
You need to check APP_Start\BundleConfig and code .css and site.css for manking bootstrap working... if you are using VS2013, you can choose MVC project that already includes bootstrap libraries...
Regards!!!
Related
I've started developing to sitefinity CMS and I'm having some conflicts when applying styles and Jquery/javascript to Different Widgets.
I want each widget to have its own Style and its Own Jquery and Javascrip functions.
What's happening is that I'm applying in one widget preventDefautls to all its textboxes, and the other widgets' textboxes get affected too.
I'm also applying different css to the widgets and there are conflicts too.
Maybe the good practice is to use the same css to all widgets.
but still when I want to apply something like preventDefaults to all its textboxes, all my widgets get affected.
How can I avoid this?
Im developing ASP.NET MVC Widgets
and this is my widgets structure
<script src="#Url.Content("~/Scripts/jquery-1.11.3.js")"></script>
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.805/styles/kendo.bootstrap.min.css" />
<style>
//addicional style
<style>
<script>
//scripts...
</script>
<div>
Content...
</div>
Some advices about good practices, documentation, or code would be great.
For the styles, I generally wrap my custom widgets with a specific class, eg "imageGallery", and then in my main css (which I manage with grunt/compass), I make sure to target that class explicitly. This way, I can have global style settings, but then also style specific widgets with tweaks. And the nice thing with grunt/compass, is that you can have a separate physical css file for each widget's styles, but they all get bundled together for publishing.
For js, I typically inherit from the SF types, eg "SimpleScriptView", and then override the GetScriptDescriptors(), GetScriptReferences(), etc methods. This allows the scripts to be bundled with the ashx, and cuts down on risk of duplication, etc. It can be a little more complicated to follow the Sitefinity layout of the javascript classes at first, but you'll be consistent with the framework, so you can even decompile SF to get more examples when needed.
In my layout page, I have:
<link href="~/Content/bootstrap.css" rel="stylesheet">
My understanding is that this should not be altered when it is sent to the client. However, when I set up the website as a virtual application under a "myapp" folder in IIS, the HTML is:
<link href="/myapp/Content/bootstrap.css" rel="stylesheet">
I'm a bit confused as I had thought I would need to change these URLs to:
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet">
in order for this to work correctly.
So do I need to use URL.Content to get the correct root URL of the app/website, or can I just put tildes into the actual HTML src + href elements, and assume it will be outputted correctly by IIS?
As of ASP.NET MVC version 4 (or actually Razor version 2), the tilde links are essentially shortcuts to Url.Content(..).
You actually answered your own question. Yes, you should use Url.Content() for your relative paths. A simple tilde in front of relative paths are only parsed in the client's browser,which treats all URL's under the http://www.foo.com/ as a single domain, so will try to look for resources at http://www.foo.com/ and not http://www.foo.com/myapp/.
According to the answer provided by REMESQ on this question: Is it possible to use razor layouts with Orchard CMS and bypass the theming
I was able to have separate layout and pages for a module bypassing Orchard's themes and layouts. But having problem referencing the cs,js script files (located in different folders of the module). Getting 404 NotFound error.
I tried referancing in the following way:
#Script.Include("~/Scripts/jquery-1.9.1.js")
But cant get the correct reference path rendered attached picture
Your URL is wrong - it should be either:
jquery-1.9.1.js. Without leading tilde and Scripts/. Orchard will make sure the final URL will lead to /Scripts folder in your current module, or
~/Modules/Your.Module/Scripts/jquery-1.9.1.js
it works if written in this way:
<link href="~/Modules/ModuleName/Styles/site.css" rel="stylesheet" type="text/css" />
For the image tags in html we can write like this:
<img alt="" src="~/Modules/ModuleName/Styles/images/for-rent.jpg" />
In my web app, I have a page where I use autocomplete widget from jQuery UI.
I link to jQuery Mobileand jQuery UI CSS from this page.
link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css" link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"
when I do this, my jQuery Mobile data-icons dont show at all. I just see a black hole in place. The other pages where I refer to only the jQuery Mobile have no issues. they display the data-icons fine.
Any idea as to what I could be doing wrong?
Put the jQuery UI css link BEFORE the jQuery mobile css and should work.
Try linking your Javascripts in the followng order:
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
If this doesn't help, try using the custom selector in your code :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually specially for your data-icons
jQuery mobile shows the icon through a background-image and position CSS declaration, it's likely you have CSS that is overriding those styles.
To find your issue, use your debugger, Chrome's debugger is especially useful, under Computed Style look for the background-image/position style and the CSS class in conflict. Then you can see which class is winning and the actual value, if you see a black box you may very well just have a bad url to the image - which you can identify here as well by following the image link on the CSS style and seeing if that image really exists.
Also I don't see your < and > brackets around your CSS declaration, correct me if I'm wrong but I think you're supposed to link to each css file with a separate tag:
<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">
how many methods for adding style sheets in a page using Asp.net MVC
Wherever you're specifying the CSS for your details page instead of a relative path e.g.
<link href="../../Content/CSS/details.css" rel="stylesheet" type="text/css" />
try using the content helper and specifying a virtual path instead
<link href="<%= Url.Content("~/Content/CSS/details.css") %>" rel="stylesheet" type="text/css" />
It seems that the site is having trouble loading getting to the CSS file based on a relative link.
Use absolute links to css instead of relative (eg /Content/site.css" instead of "../Content/site.css"). Also you may use Html.Stylesheet("~/Content/site.css") extension (in MvcContrib library) to specify a stylesheet.
Is the problem not getting the right CSS? If so, then I would check your Details.aspx file and make sure the link to the CSS is the right path. Most likely, your Details.aspx file got moved into a new subdirectory or into another directory, thus making the relative paths between the aspx file and the CSS file different.
I would check the page source from the browser and look to see what the path to the CSS file is. The way I would solve the problem would be to modify the aspx file to use a fully-qualified path to the css file. Make sure that works. Then try changing the full path to use relative path.
I had the same issue when working through an example in an MVC book, it mentioned something about the '~' character only working because the <head> tag has the runat="server" attribute on it. So, I tried adding the runat attribute to the link tag itself, as seen below, and it worked:
<link runat="server" href="~/Content/styles.css" rel="stylesheet" type="text/css" />