I'm sending an html formatted responsive email to my clients after they sign up from my .net MVC app. My problem is that the picture which in this case is my logo doesn't get centered no matter what css or bootstrap class I apply to it. It looks fine when rendering on a computer or even in another different mail client on ios. The problem seems to be the default mail app. Here is how it is showing. The first picture is how it appears on the mail app and the second picture is how it appears on a desktop which displays correctly. Please note that the white text is the picture. The purple background is just a div that I made purple.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Welcome To Church Musician!</title>
<style>
.header {
background-color: darkviolet;
height: 200px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container{
background-color: white !important;
}
body{
background-color: whitesmoke !important;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container" >
<div class="header">
<img class="img-fluid"src="cid:id1" />
</div>
<hr />
<p>This is a test</p>
</div>
</body>
</html>
Related
I have html content that has to start at the absolute top left corner of the page. However, the HtmlConverter automatically adds a 0.5in gap from the top and left side of the pdf page. How do I override this default margin?
You can set the margins of a page through CSS using #page. The following declaration sets all the page-margins to 0, as well as draws a border around paragraphs for visual reference:
#page{
margin:0pt;
}
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
}
Use the following as input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin example</title>
<link href="margin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<p>This page should have the margins set at 0</p>
</div>
</body>
</html>
And you'll see that the paragraph's border is touching the left side of the page, but not yet the top side. That's because the paragraph has some innate margin as a blockelement as well. Setting this to 0 will do the trick:
p{
border-left: solid 2pt blue;
border-top: solid 1pt blue;
border-bottom: solid 1pt blue;
margin-top: 0pt;
}
#page{
margin:0pt;
}
And the output:
I have noticed a difference between how IE 11 renders this page and the WebBrowser control renders this page. WebBrowser's emulation mode matches that of IE11, so that is not the issue. Could this be a defect?
This is how I am setting the WebBrowser object in C#:
browser.Dock = DockStyle.Fill;
browser.ScrollBarsEnabled = false;
browser.DocumentText = /* I am setting the html here */;
If you run this in WebBrowser, you will not see the second line, yet it works perfectly in IE11.
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>WebBrowser Rendering Issue</title>
<style>
#main-div {
position: relative;
height: 100%;
overflow: hidden;
}
.child-div {
position: absolute;
}
</style>
</head>
<body>
You will only see this line rendered in WebBrowser.
<div id='main-div'>
<div class='child-div'>
You will also see this line when ran in IE or Chrome.
</div>
</div>
<script>alert("Document Mode: " + document.documentMode);</script>
</body>
</html>
I am trying to build my own mailer controller to handle custom email generation.
I have a default layout mailer that handles all the common parts of the mail template.
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#ViewBag.Title</title>
</head>
<body>
<header style="width: 100%; height: auto; padding: 20px 20px 10px 20px; border-collapse: collapse; border-spacing: 0; background-color: #eee; color: #555 !important; ">
<h1 style="margin-top: -10px; margin-bottom: 0;height:80px; ">
<img style="float:left;" src="https://mylogoimage" alt="logo" />
<span style="padding: 30px 0 0 10px; float: left; color: #555 !important; font-size: 28px;"> Confirm Registration</span>
<a style="padding: 35px 40px 0 0; float: right; color: #555 !important; font-size: 14px;" href="#">View in Browser</a>
</h1>
</header>
<div id="emailbodytext">
#RenderBody()
</div>
<footer style="background-color: #eee; color: #555 !important; height:50px;padding-top:10px;">
<p style="margin-left:25px;">
<strong><span style="font-size:1em;font-style:italic;">You are receiving this email because you registered an account at TraderToolkit.com</span></strong>
<img style="float:right;margin-right:25px;padding-bottom:10px;" src="https://mylogoimage" alt="logo" /><br />
</p>
</footer>
</body>
</html>
I created a Registration view that uses the layout shown above. Which VS generates as;
#{
Layout = "~/Views/Mailers/_LayoutMailer.cshtml";
}
I then add my model to reference
#model EmailViewModels.RegistrationConfirmOutputViewModel
VS2015 is fine with all that. Then I add the html for the view.
<section style="font-size:1.1em;">
<h3 style="margin-left: 10px;">Greetings #model.FullName,</h3>
<p style="margin-left: 25px;">
You (or someone else) entered this email address to register an account at #model.ApplicationName.<br /><br/>
The request was sent from this IPAddress -- <span style="font-size:1.15em;font-weight:bold;">#model.IpAddress</span>.
<br />
The approximate geographic location from where this request was sent is <span style="font-size:1.15em;font-weight:bold;">#model.IpLocation</span>.
<br /><br />
If you sent the request and wish to confirm your registration please click the button below to complete your registration
<br />
#Html.ActionLink("Confirm Registration", "ConfirmRegistration", "Account", new { parameters = #model.UserId }, null)
<br /><br />
If you feel your email account has been compromised please take the appropriate steps to secure your account.<br />
Please click the button below so we can remove this registration request.<br />
#Html.ActionLink("Delete Request", "ChangePassword","Account",new { parameters = #model.UserId },null)
<br /><br />
Thank you.<br />
The staff at #model.ApplicationName
</p>
And this is where it falls apart. Layout, in the declaration is now red as are every reference to #model. Error now says :
Cannot resolve symbol Layout
None of the #model properties exist in current context.
Is there something about views that use a layout that cannot use a model reference? I am new to learning MVC and not sure how to proceed.
Also, am I using the Html.ActionLink properly because #Html is in red as well.
Update
I tried recreating the view by referencing the viewmodel in the view create dialog (referencing the application ocntext too) by that wouldnt create the view saying there was no key defined in the entity (RegistrationConfirmationOutputViewModel). Why would a viewmodel need a key? Does that view create dialog only reference Domain models?
I have a bit of Jquery code the expands a tree menu and MVC 5 app and when I hard code the style in the view it works. However I want to place the code in the CSS file I have the others in, but when I move it in there it only seems to partially work.
view file the controller is calling:
#model List<OrwellFrontEnd.Models.SiteMenu>
#{
ViewBag.Title = "Simple";
}
#section AddCustomStylesToHead{
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
}
#section Treeview
{
<section class="Treeview">
<div class="container body-content">
<h2>Simple Treeview from Database Data</h2>
<div style="border:solid 1px black; padding:10px; background-color:#FAFAFA">
<div class="treeview">
#if (Model != null && Model.Count() > 0)
{
<ul>
#TreeviewHelper.GetTreeView(Model, Model.FirstOrDefault().ParentMenuID)
</ul>
}
</div>
</div>
</div>
</section>
}
#* Here We need some Jquery code for make this treeview collapsible *#
#section Scripts{
<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>
}
<p> It is body of Index view that renders in BodyRender.</p>
Style code that is now in ~/Content/Site.css
/*Here We will add some css for style our treeview*/
.collapse {
width: 15px;
background-image: url('../Contetn/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -36px -17px;
display: inline-block;
cursor: pointer;
}
.expand {
width: 15px;
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -50px -17px;
display: inline-block;
cursor: pointer;
}
.treeview ul {
font: 14px Arial, Sans-Serif;
margin: 0px;
padding-left: 20px;
list-style: none;
}
.treeview > li > a {
font-weight: bold;
}
.treeview li {
}
.treeview li a {
padding: 4px;
font-size: 12px;
display: inline-block;
text-decoration: none;
width: auto;
}
And below is the layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("AddCustomStylesToHead"))
{
#RenderSection("AddCustomStylesToHead", required: false)
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
#RenderSection("Treeview", required: false)
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
It's probably a mess now as been trying to tinker. It seems to sort of work as if I change with width or padding and other attributes in the Treeview li/ui of the style it does affect the page, but the image isn't displaying when it is in the css file but works fine when I have it in the view directly.
Thanks,
Rob
I doubt you can use "head" in that view - You're editing inside the body already.
You can use the below solution unless you're using a partial view.
In the layout-page, add a new section:
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("AddCustomStylesToHead"))
{
#RenderSection("AddCustomStylesToHead", required: false)
}
</head>
...
Then in your views, you can use the following to add additional css:
#section AddCustomStylesToHead{
<link href="#Url.Content("~/Content/MyPage.css")" rel="stylesheet" type="text/css" />
}
Update
From the comments, and your updated question, it is clearly a problem with relative paths and/or css.
So, a few fixes:
Only keep one of the links to "Site.css" in your _Layout. I would keep the one with #Url.Content. Also you can remove the code I suggested you to add, since that was not your issue at all (remove from both _Layout and the view).
Possible Wrong relative path:
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
Should, probably, be (if you have "Images" in it's own folder, directly under to project root):
background-image: url('../Images/ui-icons_454545_256x240.png');
If you have the image-folder as a subfolder to "Content" though, this would work:
background-image: url('Images/ui-icons_454545_256x240.png');
Spelling error:
url('../Contetn/Images/ui-icons_454545_256x240.png');
But that will resolve itself if you "correct" the paths.
Remove empty style:
.treeview li {}
It's just not needed.
One last thing, since I noticed you use Bootstrap. If there is a conflict in styles between your css and bootstraps, the bootstrap style will win. For example I suspect that ".collapse" is a bootstrap style, so yours will be overwritten.
To change this you can put your link to "Site.css" after Bootstraps (in the head _Layout). Bootstrap might still overwrite certain things, but at least you have a bigger chance of "winning".
I'm having a difficult time finding a solution to my problem that relates to asp:Menu control and centering in a page. I'm really surprised all the solutions I search on Google are either not using asp:Menu control or just using lists or tables only.
I know margin:0 auto` and adding a width works but when I put it for the menu control I can't get it working.
This is my master page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<header></header>
<nav>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false" DataSourceID="dsSiteMap" CssClass="MainMenu" />
<asp:SiteMapDataSource runat="server" ID="dsSiteMap" ShowStartingNode="false" />
</nav>
<section id="MainContent">
<asp:ContentPlaceHolder id="cpMainContent" runat="server"></asp:ContentPlaceHolder>
</section>
<footer></footer>
</div>
</form>
</body>
</html>
CSS:
body
{
margin: 0;
background-color: gray;
}
#PageWrapper
{
width: 1366px;
background-color: white;
margin: auto;
}
nav
{
width: 1366px;
height: 36px;
background-color: seagreen;
}
nav a
{
color: #fff;
}
.MainMenu
{
border: 1px solid #999999;
width: 1366px;
height: 19px;
background-color: #555555;
}
ul.level1
{
display: block;
width: 300px;
text-align: center;
margin: 0 auto;
}
Sitemap:
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="~/">
<siteMapNode url="~/Default.aspx" title="Home" description="Go to the homepage" />
<siteMapNode url="~/NewTicket.aspx" title="New Ticket" description="Create a new ticket" />
<siteMapNode url="~/Search.aspx" title="Search" description="Search tickets" />
</siteMapNode>
</siteMap>
Funny thing is when I create a label and place it in a placeholder, margin: 0 auto and width: auto works in centering.
Thank you everyone.
I finally was able to figure it out.
I edited the styling to my nav parent element:
nav{
clear: both;
text-align: center;
display: table;
margin: 0 auto;}
So instead of having it displayed as a block I set it as a table. Funny thing is it is still rendered as a list.
I have it to clear because I have elements before it that was floated to the left.
I definitely learned a lot more about CSS with this issue.
Kind of crazy for so much trouble just for one styling. Surprised
I don't remeber the generated markup for asp:menu but I think the problem is in your .MainMenu selector, you are defining it with width: 1366px; what maches the nav width, so even if you set margin-right/left auto it won't work.
To center it you can or you set a width smaller than its parent's or you can set display: inline-block; for the menu and text-align:center; in the nav.
Example for the two options: http://jsfiddle.net/T9SvT/
I duplicated your example above. #PageWrapper is 1366px wide and centered on the page. It contains the Menu control which is also 1366px wide and its cells are spaced evenly across the width. I tested this in Chrome and IE9. I only have 3 items in my sitemap, however. That may be related to your problem: how wide is the menu?
Keep in mind that asp:Menu renders as an HTML table, so when you apply a style to it, that is basically what you are working with. I would recommend sizing the <nav> area to where you want the Menu to be and simply making the Menu fill that space with Width="100%".
Certainly "float" should not be necessary.