In ASP.NET MVC, there are these snippets of html called view templates which appear when their matching data appears on the screen. For example, if you have a customer order and it has a vendor address, the vendor address view template shows up populated with data.
Unfortunately, these don't have access to "MasterPages" nor are aware of their CSS surroundings.
Instead of loading these up with style tags, is there any way to create partial CSS files that could work for that particular html snippet, a sort of in-line CSS style section?
It would be really nice to plop this down just before we render the partial view:
<style type="text/css">
input { margin: .2em .2em;
overflow: hidden;
width: 18.8em;
height: 1.6em;
border: 1px solid black;}
</style>
to have the 15 or so input fields in that particular Html snippet be formatted the same. These are swapped out, so the positions of the input fields change. This may also imply a CSS reset on each partial view.
I thing that an idea would be to include an additional content section in Head of the master page
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="CssContent" runat="server" />
</head>
In doing so, you can then inject the specific styles for each view.
Edit: After posting I think the above is not what you are referring to. What you may consider is rolling your own ViewUserControl similar to Script & CSS Registration Helper in ASP.NET MVC??
Why not have a css file that is referenced in the partial views or am I mising the point of the question?
Related
I am using TinyMCE React with fullpage and code plugins enabled to create email templates. I am trying to insert a <style /> with custom css classes defined inside the <head />. But every time I reload the component, the <style /> is being stripped out. Here is a simplified exampled:
...
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
Is this scenario supported? I have looked at a number of similar issues such as this. They seem to suggest the use of the valid_children option. As I understand, this option allows the inclusion of "invalid" tags inside parent tags. But <style /> inside <head /> is valid.
Any help would be greatly appreciated
Without knowing more about how you have TinyMCE configured it is very hard to say what is causing this issue. I am certainly able to load a style in the head of a document managed by TinyMCE as shown in this TinyMCE Fiddle:
http://fiddle.tinymce.com/cPgaab/2
How is your TinyMCE configured? If you update this fiddle to use your configuration is the style no longer kept?
I am having some issues with one of my html forms. It looks like because the select drop downs and the input text boxes are not the same size all my controls are misaligned in ie6. You can see that all the controls under selected date get pushed out of alignment more and more as we go down. This does not happen in firefox.
I am using yaml as my css framework and I thought that it would be covered but it doesn't seem to be. Can someone please give me an idea on how to make the controls the same size or give ma an idea on an alternative fix.
I've put the html for the form here.... http://pastebin.com/cVrVadQf
thanks
To fix this I just piggy backed onto yaml conditional css foe ie6. I added my own stylesheet as you can see below...
<!--[if lte IE 7]>
<link href="resources/css/custom-myer-ie6.css" rel="stylesheet" type="text/css" />
<link href="resources/css/yaml/yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
Then added some simple styling to make sure alignment was ok...
.ym-form .ym-fbox-select select#businessDateFilterType,
.ym-form .ym-fbox-select select#exceptionFilterType {
margin:2px !important;
}
.ym-form .ym-fbox-select select#registerFilterType,
.ym-form .ym-fbox-select select#teamMemberFilterType {
margin:4px !important;
}
.ym-form fieldset.border {
border: none !important;
}
I have two CSS files style1.css and style2.css. Each of them include many lines of styles.
I use them in all project pages. I have no problem with using them on Master page but, the content pages(the pages that inherited from master page) can't find the second CSS file!
For example on a inherited page when a div's class is set to a style from style2.css, it doesn't work. It can't find the CSS selector. :(
Master page's head tag:
<head runat="server">
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="~/css/style1.css" />
<link rel="stylesheet" type="text/css" media="screen,projection,print" href="~/css/style2.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Also, I've linked the CSS file on the inherited page but doesn't work.
Even, on the designing state the visual studio can't go to definition of the CSS selector line by pressing the F12 key on the desired selector name, so it raises "Could not find CSS class selector 'loginform'" error.
Do it declaratively in the master page by dragging the CSS files from Solution Explorer window to the code view of the mark-up.
Is there anyway I can get the all style of a page (even the style in some linked css files) as inline style?
For example, I have my css file:
body {
background-color: red;
color: black;
}
And this HTML:
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>Hello World!</body>
</html>
So I'd like to get:
<html>
<head></head>
<body style="background-color: red; color: black;">Hello World!</body>
</html>
It would also work for me if I can get all the style in a style node.
from your comments, what you need is very different
What you are looking for is a tool that grabs an HTML page with it's own CSS styling and convert them into inline styling.
For that, plenty of tools are at your service:
http://premailer.dialect.ca/
There are more in Google, this is commonly used in Mailing as Email Client Applications do not intrepertate linked CSS but inline css.
If you are looking for a .NET solution, you might be interested in PreMailer.NET.
https://github.com/milkshakesoftware/PreMailer.Net
PreMailer pm = new PreMailer();
string premailedOutput = pm.MoveCssInline(htmlSource, false);
Old post, but I finally (2 years late!) got this up on github and in nuget:
https://github.com/lukeschafer/HtmlCleanser
Note: Premailer.Net (suggested by Arical) does not inline correctly.
Since there are no header sections for user controls in asp.net, user controls have no way of knowing about stylesheet files. So css classes in the user controls are not recognized by visual studio and produces warnings. How can I make a user control know that it will relate to a css class, so if it is warning me about a non-existing css class, it means that the class really do not exist?
Edit: Or should I go for a different design like exposing css classes as properties like "HeaderStyle-CssClass" of GridView?
Here's what I did:
<link rel="Stylesheet" type="text/css" href="Stylesheet.css" id="style" runat="server" visible="false" />
It fools Visual Studio into thinking you've added a stylesheet to the page but it doesn't get rendered.
Here's an even more concise way to do this with multiple references;
<% if (false) { %>
<link rel="Stylesheet" type="text/css" href="Stylesheet.css" />
<script type="text/javascript" src="js/jquery-1.2.6.js" />
<% } %>
As seen in this blog post from Phil Haack.
Add the style on your usercontrol and import css in it.
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="WCReportCalendar.ascx.vb"
Inherits="Intra.WCReportCalender" %>
<style type='text/css'>
#import url("path of file.css");
// This is how i used jqueryui css
#import url("http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css");
</style>
your html
If you are creating composite UserControl, then you can set the CSSClass property on the child controls..
If not, then you need to expose properties that are either of the Style type, or (as I often do) string properties that apply CSS at the render type (i.e. take them properties and add a style attribute to the HTML tags when rendering).
You Can use CSS direct in userControl.
Use this in UserControl:
<head>
<title></title>
<style type="text/css">
.wrapper {
margin: 0 auto -142px;
/* the bottom margin is the negative value of the footer's height */
}
</style>
</head>
This will work.