In trying to fine-tune the appearance of my Web API page, I'm making changes to CSS classes, and adding new classes, to \Content/Site.css, yet they do not alter the appearance of the page as they should, even when I append "!important" to specific rules.
For example, I added a horizontal rule to the page, which does show up, but quite unobtrusively (with a faint, barely discernible line). So I added this .css class to Site.css:
hr {
border: 0;
height: 1px;
color: navy;
background: #333;
}
...which works just fine in another project, but doesn't in this one. The line remains faint even when I append "! important" to the "height" rule there:
height: 1px !important;
I tried right-clicking the page at runtime and selecting "Reload Page" but that made no difference, either.
Other CSS changes (margins and paddings) are not having any effect, either; this is just one specific case whose resolution should work for all of them.
What do I need to do to get modified/added CSS rules to be applied?
UPDATE
Even when I, acquiescing to Algernop K's suggestion, change the code from this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr />");
. . .
...to this:
. . .
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style=\'size:4;\' />");
. . .
...(adding "; margin-top:48;" to the h1 element, and "size" to the hr), no change is evident.
UPDATE 2
A "funny" thing happened on the way to the Inspecting of Elements. As Chris W suggested, I right-clicked the hr element on the page, but it's so miniscule that I may have got a different element to inspect. Nevertheless, an err msg in the console may be revealing the basic problem - there it says, "bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery"
UPDATE 3
Should I explicitly add my \Content\Site.css file to the html? I tried dragging it from Solution Explorer below the lines shown above, hoping it would generate the correct code, but instead it gave me:
C:\Projects\ProActWebReports\ProActWebReports\Content\Site.css
...and a prompt to add "'System.Security.Policy.Site' and all other references in file"
Note that I have a related question here
UPDATE 4
FWIW, here's the entire (relevant) code that builds up this html:
namespace PlatypusWebReports.Controllers
{
[RoutePrefix("api")]
public class LandingPageController : ApiController
{
private string _unit;
[Route("{unit}")]
public HttpResponseMessage Get(string unit)
{
_unit = unit;
string beginningHtml = GetBeginningHTML();
string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
string fillRateHtml = GetFillRateHTML();
string priceComplianceHtml = GetPriceComplianceHTML();
string produceUsageHtml = GetProduceUsageHTML();
string endingHtml = GetEndingHTML();
String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
beginningHtml,
deliveryPerformanceHtml,
fillRateHtml,
priceComplianceHtml,
produceUsageHtml,
endingHtml);
return new HttpResponseMessage()
{
Content = new StringContent(
HtmlToDisplay,
Encoding.UTF8,
"text/html"
)
};
}
private string GetBeginningHTML()
{
StringBuilder builder = new StringBuilder();
builder.Append("<html>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("</head>");
builder.Append("<body class=\"body-content\" style='margin-top:0;margin-left:60;margin-right:60;'>");
builder.Append("<div class=\"jumbotronjr\">");
builder.Append("<img src=\"http://www.Platypususa.com/wp-content/themes/Platypus/images/pa_logo_notag.png\" alt=\"Platypus logo\">");
builder.Append(string.Format("<h1 style=\'margin-left:16; margin-top:48;\'>Available Platypus Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("<p style='margin-left:16;'>(Click any link below to download the Excel spreadsheet file to your computer)</p>");
builder.Append("</div>");
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='color:red;height:12;' />");
builder.Append("</div>");
builder.Append("</div>");
// for beginning the row div
builder.Append("<div class=\"row\">");
return builder.ToString();
}
private string GetEndingHTML()
{
StringBuilder builder = new StringBuilder();
// for ending the row div
builder.Append("</div>");
builder.Append("</body>");
builder.Append("</html>");
return builder.ToString();
}
. . .
Everything is displaying basically as I want it to, it's just not allowing me to add the "gingebread" (adding margins, hrs, shadow around the used area)
UPDATE 5
Even though _ViewStart.cshtml points to Layout:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
...and _Layout.cshtml renders (supposedly) the Styles in the Content/css folder, which contains the Sites.css which I have been adding CSS styles madly to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - PRO*ACT USA</title>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#*#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")*#
#RenderSection("scripts", required: false)
</body>
</html>
...all that does nothing to add these styles I want. The only way seems to use inline styles:
builder.Append("<body style='margin-top:40;margin-left:60;margin-right:60;'>");
. . .
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;' />");
The whole process could certainly be made much clea[n,r]er / more straightforward.
Related
Is there a way to add white space in MVC while using variables? for example foreach(item in collection) {#item #item}. How to make a blank space something like " " in it?
You can use pre tag , which defines preformatted text.
foreach(item in collection) {
<pre>#item #item</pre>
}
have you tried this can be repeated i.e. you can do line breaks with <br />
In my application I have used a space after the link's name ("Details ") as shown here
#Html.ActionLink("Details ","Details", new { Variable_ID = item.VIP_ID})
#Html.ActionLink("Edit", "Edit", new { Variable_ID = item.VIP_ID })
so my links will look like this: Details Edit, instead of DetailsEdit.
You can also put a separation bar like this "Details | ", so you can have
Details | Edit
<span> </span>
Insert " " to add more blank spaces
//This will work for sure, as MVC C# using razor syntax then you just need to put space between those two only
foreach(var item in collection) {
<span>#item #item</span>
}
If you wish to add single space between item:
foreach(item in collection)
{
<p>#item #item</p>
}
But you will have better flexibility if you wrap it in a HTML element like div or span,
and then add padding/margin to the element using CSS.
foreach(item in collection)
{
<div class="user-defined-classname">#item</div>
<div class="user-defined-classname">#item</div>
}
In CSS
.user-defined-classname{
padding-left|right|top|bottom: 10px
}
Suggestion:
The "Views" folder is specifically meant to just contain your view files (i.e. .cshtml files).
Try adding your CSS file to a folder in the root of the ASP.NET project. Often, this folder is named "Content", but you can rename it as "Styles" or something else. Then you can load your CSS file from within a view using a link tag:
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
This may help.
One more variant:
#(string.Format("{0} {1}", item, item))
I want to edit programmatically css file using asp.net's code behind, furthermore I tried some commands but without results.
to explain my situation: I should modify file.css (.class1 exist) from file.aspx.cs. For example add this proprety :
.class {backgroud-color:grey}
I made this:
<link href="file.css" rel="stylesheet" id="boxcss" runat="server" />
and in the code behind:
string iframe = "iframe{border-radius:300px}";
boxcss.Attributes.Add("class",iframe);
thanks for your help
You can use the following code to add style attributes to the existing .class1 selector or to create a new .class2 selector:
Style class1 = new Style();
class1.BackColor = Color.Orange;
Header.StyleSheet.CreateStyleRule(class1, null, ".class1");
Style class2 = new Style();
class2.BorderColor = Color.Red;
class2.BorderStyle = BorderStyle.Solid;
class2.BorderWidth = Unit.Pixel(5);
Header.StyleSheet.CreateStyleRule(class2, null, ".class2");
However, the Style class does not give access to border-radius. You can add that style attribute to the Header with the help of a Literal control:
Literal iframeStyle = new Literal();
iframeStyle.Text = "<style>iframe { border-radius: 300px; }</style>";
Header.Controls.Add(iframeStyle);
Note: The head tag must have the runat="server" attribute to be accessible in code-behind:
<head runat="server">
I want to have a text input field in toolbar that looks like search input and is controlled by a FF extension.
I am using sdk/widget:
in main js file I have
var reason = require("sdk/widget").Widget({
label: "Progress Block - reason",
id: "text-entry",
contentURL: data.url("reason.html"),
width: 120
});
in reason html file
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<style type="text/css" media="all">
</style>
</head>
<body>
<input type="text" style="width: 105px; height: 16px;">
</body>
</html>
With this style input field is absurdly small, but at least FF displays it - without style scrollbars are displayed.
Without style - I wanted something like search field, I got scrollbar:
After adding width style:
With style as posted:
What is the proper way to have a well formed text input in toolbar controlled by an extension?
I would insert a textfield with CustomizableUI.jsm type custom and build the thing.
This is how to make custom type customizazbleui.jsm stuff: https://gist.github.com/Noitidart/10902477
I tried to find how the searchbar was created, i would have though it was also done via customizableui.jsm but i couldnt find it on mxr.
edit:
this is how:
const {Cu} = require("chrome");
Cu.import('resource:///modules/CustomizableUI.jsm');
CustomizableUI.createWidget({
id: 'myCUITextbox',
type: 'custom',
removable: true,
defaultArea: CustomizableUI.AREA_NAVBAR,
onBuild: function(aDocument) {
var node = aDocument.createElement('toolbaritem');
node.setAttribute('id', this.id);
var props = {
title: 'Search',
align: 'center',
class: 'chromeclass-toolbar-additional panel-wide-item',
flex: 100
};
for (var p in props) {
node.setAttribute(p, props[p])
}
var textbox = aDocument.createElement('textbox');
node.appendChild(textbox);
//node.style.listStyleImage = "url(" + (aProvider.icon32URL || aProvider.iconURL) + ")";
return node;
}
});
And when you want to remove do:
CustomizableUI.destroyWidget('myCUITextbox');
The widget api has been deprecated and you should not use it. If you look at the browser console, you'll see messages from the SDK warning about this deprecation.
Instead, you should be using the newer UI elements introduced with Firefox 29 like the toolbar api:
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui#Toolbar
I am trying to add a <div class="wrapper"> to my generated html after the body tag. I want the ending </div> to be before the ending </body>. So far I have
private String addWrapper(String html) {
Document doc = Jsoup.parse(html);
Element e = doc.select("body").first().appendElement("div");
e.attr("class", "wrapper");
return doc.toString();
}
and I am getting
</head>
<body>
</head>
<p>Heyo</p>
<div class="wrapper"></div>
</body>
</html>
I also can't figure out why I am getting "</head>" in the html too. I only get it when I use JSoup.
Jsoup Document normalizes the text with normalise method. The method is here in Document class. So It wraps with and tags.
In Jsoup.parse() method it can take three parameter, parse(String html, String baseUri, Parser parser);
We will give the parser parameter as Parser.xmlParser which is using XMLTreeBuilder (Otherwise it uses HtmlTreeBuilder and it normalises html.).
I tried, latest code (it may be optimize) :
String html = "<body></head><p>Heyo</p></body>";
Document doc = Jsoup.parse(html, "", Parser.xmlParser());
Attributes attributes = new Attributes();
attributes.put("class","wrapper");
Element e = new Element(Tag.valueOf("div"), "", attributes);
e.html(doc.select("body").html());
doc.select("body").html(e.toString());
System.out.println(doc.toString());
thanks in advance for any help you can offer. I have been digging through the various posts here on SO trying to solve a missing page break issue. I have a number of cshtml templates that are rendered using a Razor template engine to produce an RTF file. When the file is opened in Word it completely dumps the html that contains the "break" style used to make a page break. The rest of the template renders exactly as designed. I am thinking that maybe my problem is I'm not rendering out the file correctly in the first place.
Sample .cshtml file starts with:
<div style="width: 100%;" class="newpage">
<p align="center" style="text-align:center">NOTICE</p>
<table>
....middle html content....
</table>
<p class="newpage"></p>
</div>
I've tried putting the page break at the beginning and the end just to see if it made any difference and it didn't.
The razor call that gets the .cshtml file is like this:
newNotice.Body = RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
return newNotice;
Then I render out the RTF file in the following code where the style for the page break exists:
protected void ProduceNotification(Notification notice, string title)
{
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition", "attachment;filename=" + title);
Response.ContentType = "application/rtf";
EnableViewState = false;
var stringWrite = new StringWriter();
var sb = new StringBuilder();
sb.Append(#"<html>
<head>
<title></title>
<style type='text/css'>
.body {
margin: 5em;
background-color: white;
width: 100%;
height: 100%;
font-family: Calibri;
}
.spacing {
line-height: 1.5em;
}
.newpage {
mso-special-character:line-break;
page-break-before:always;
clear: both;
}
</style>
</head><body>");
sb.Append(notice.Body);
sb.Append("</body></html>");
stringWrite.WriteLine(sb);
ClearChildControlState();
Response.Write(stringWrite.ToString());
Response.End();
}
When I open up the file in Word, the page breaks are not being respected so I saved the file to .html to see what the mark up looks like and here's what I see:
In the style definition section it shows the style:
p.newpage, li.newpage, div.newpage
{mso-style-name:break;
mso-style-unhide:no;
mso-margin-top-alt:auto;
margin-right:0in;
mso-margin-bottom-alt:auto;
margin-left:0in;
page-break-before:always;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman","serif";
mso-fareast-font-family:"Times New Roman";
mso-fareast-theme-font:minor-fareast;}
But in the document where the html should show the element with the class on it, it looks like this instead (this is in the middle of the html output):
<div>
<p align=center style='text-align:center'>NOTICE </p>
<table>
......middle html content.....
</table>
</div>
Notice that the style and class are missing from the div tag and the p tag is missing all together. What I can't figure out is, is the conversion to RTF deleting these for some reason or is it the Razor Templating Engine that's stripping out the text? I've also tried changing this to output an .doc format also but the result has been the same.
So the aggravating answer also turned out to be the simplest one. The style was applying to p, li, or div elements but only if the element has some kind of content:
<div class='newpage'> </div>
As long as I used one of the correct elements, it works as long as there is some kind of content (in this case just a space). Once I had it working, I also had to address the issue of it adding an extra blank page to the output since originally I had the line in the cshtml file itself. Instead I moved it to the code behind.
I created a var to hold the last list item, as demonstrated in this SO post here.
var lastItem = myList.Last();
foreach(var d in myList)
{
newNotice.Body += RazorEngine.Razor.Parse(Notifications.GetTemplate(NotificationTemplate.MyTemplate2), data, NotificationTemplate.MyTemplate2.ToString());
if(!ReferenceEquals(d, lastItem))
newNotice.Body += "<div class='newpage'> </div>";
}