Convert from html string to pdf using itextsharp in asp.net - c#

I'm using iTextSharp in my project and using this method to parse html string to pdf
public static MemoryStream MakePdf(string htmlCode)
{
MemoryStream msOutput = new MemoryStream();
TextReader reader = new StringReader(htmlCode);
Document document = new Document(PageSize.A4, 30, 30, 30, 30);
PdfWriter writer = PdfWriter.GetInstance(document, msOutput);
HTMLWorker worker = new HTMLWorker(document);
document.Open();
worker.StartDocument();
worker.Parse(reader); // EXCEPTION IN THIS LINE!!!!
worker.EndDocument();
worker.Close();
document.Close();
return msOutput;
}
And it doesn't work for me. It throws an exception at selected line
URI formats are not supported.
How can I solve this problem?
P.S. Here is html I need to parse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="Boomer" />
<style type="text/css">
body
{
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
font-family: Myriad Pro;
font-style: italic;
background: #f3f3f3;
}
#font-face
{
font-family: 'Myriad Pro';
src: url('../fonts/myriadpro.eot');
src: url('../fonts/myriadpro.eot?#iefix') format('embedded-opentype'),
url('../fonts/myriadpro.woff') format('woff'),
url('../fonts/myriadpro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.clear
{
clear: both;
}
a,.blue_text
{
color:#2aa2f6;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.simple_title
{
font-size: 22px;
}
.text750
{
width: 750px;
margin: 20px 0;
}
.full_width_text
{
margin-right: 35px;
text-align: justify;
}
.grey_text
{
color:#afafaf;
}
.email_page
{
width: 1025px;
margin: 20px auto;
background: #fff;
padding: 20px 0;
}
.email_page p
{
font-size: 18px;
}
.email_div
{
margin: 0 auto;
background: #fff;
width: 998px;
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
display: table;
}
.email_content
{
margin-left: 60px;
margin-top: 40px;
}
.email_logo
{
float: left;
}
.email_title
{
float: left;
margin-left: 130px;
font-size: 22px;
color:#f7941d;
margin-top: 50px;
}
.email_img_container
{
float: right;
width: 270px;
}
.email_img_container .text_description
{
font-size: 18px;
color:#000000;
margin-bottom: 15px;
}
.email_img_container img
{
border: 1px solid #ebebeb;
border-radius: 10px;
-webkit-border-radius:10px;
-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}
.text600
{
width: 600px;
float: left;
}
</style>
<title>Voucher</title>
</head>
<body>
<div class="email_page">
<div class="email_div">
<div class="email_content">
<div class="text600">
<div class="email_logo">
<a href="#">
<img src="{EmailLogo}" />
</a>
</div>
<div class="email_title">
Instant Gift Certificate
</div>
<div class="clear"></div>
<div>
<p>To: <span class="blue_text">{RecipientName}</span></p>
<p>
<div>{GiftVoucherName}</div>
<div>{GiftVoucherDescription}</div>
</p>
<p>
This gift is from: <span class="blue_text">{SenderName}</span>
</p>
</div>
</div>
<div class="email_img_container">
<div class="text_description">
<div>SG Code: {SGCode}</div>
<div>Purchased on: {PurchaseDate}</div>
</div>
<img src="{MerchantImage}" alt="" />
</div>
<div class="clear"></div>
<div class="text750">
<p>
This gift must be redeemed by: <span class="blue_text">{Date}</span><br />
Redeemable at the following locations: <span class="blue_text">{Locations}</span><br />
For other details and terms and conditions, please see the other attachment.
</p>
<div class="simple_title">
Disclaimer
</div>
<p>
Test.com is not responsible for the content of the message or the selection of the gift by the sender.
Once the sender enters the information, the instant gift is automatically generated and sent to
the recipient.
</p>
<p>
Visit us at: www.Test.com
</p>
</div>
</div>
</div>
</div>
</body>
</html>


To solve this issue you can add Providers to your HTMLWorker using the SetProviders method which takes an IDictionary the HTMLWorker class has constants for the string keys. In your case have a look at the ILinkProvider and/or IImageProvider. These provide a way to handle the images and URLs inside of your HTML yourself, translating them into usable parts for the PDF.

Related

Use HTML template e-mail body in Google Gmail API on C#

This question was migrated from Super User because it can be answered on Stack Overflow.
Migrated 28 days ago.
I'm currently developing an app in .NET c# for my own company and I'm facing some trouble when trying to use a HTML template to send a automated e-mail to my users with my app in c#.
C# Code to send e-mail using Gmail API
public bool sendEmail(SendEmailModel email)
{
try
{
UserCredential credential = loadCredentials();
string message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
var service = new GmailService(new BaseClientService.Initializer() { HttpClientInitializer = credential, ApplicationName = ApplicationName });
var msg = new Google.Apis.Gmail.v1.Data.Message();
msg.Raw = Base64UrlEncode(message.ToString());
service.Users.Messages.Send(msg, "me").Execute();
return true;
}
catch(Exception ex)
{
return false;
}
}
string Base64UrlEncode(string input)
{
var data = Encoding.UTF8.GetBytes(input);
return Convert.ToBase64String(data).Replace("+", "-").Replace("/", "_").Replace("=", "");
}
HTML Template
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
.im {
color: inherit !important;
}
img.g-img + div {
display: none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<style>
.primary{
background: #17bebb;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #f7fafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding: 10px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 25px;
background: #e77d1a;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 25px;
background: transparent;
border: 1px solid #e77d1a;
color: #e77d1a;
}
.btn.btn-black-outline{
border-radius: 0px;
background: transparent;
border: 2px solid #000;
color: #000;
font-weight: 700;
}
.btn-custom{
color: rgba(0,0,0,.3);
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Poppins', sans-serif;
color: #000000;
margin-top: 0;
font-weight: 400;
}
body{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #17bebb;
}
table{
}
.logo h1{
margin: 0;
}
.logo h1 a{
color: #17bebb;
font-size: 24px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.hero{
position: relative;
z-index: 0;
}
.hero .text{
color: rgba(0,0,0,.3);
}
.hero .text h2{
color: #000;
font-size: 34px;
margin-bottom: 0;
font-weight: 200;
line-height: 1.4;
}
.hero .text h3{
font-size: 24px;
font-weight: 300;
}
.hero .text h2 span{
font-weight: 600;
color: #000;
}
.text-author{
bordeR: 1px solid rgba(0,0,0,.05);
max-width: 50%;
margin: 0 auto;
padding: 2em;
}
.text-author img{
border-radius: 50%;
padding-bottom: 20px;
}
.text-author h3{
margin-bottom: 0;
}
ul.social{
padding: 0;
}
ul.social li{
display: inline-block;
margin-right: 10px;
}
.footer{
border-top: 1px solid rgba(0,0,0,.05);
color: rgba(0,0,0,.5);
}
.footer .heading{
color: #000;
font-size: 20px;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer ul li{
list-style: none;
margin-bottom: 10px;
}
.footer ul li a{
color: rgba(0,0,0,1);
}
#media screen and (max-width: 500px) {
}
</style>
</head>
<center style="width: 100%; background-color: #f1f1f1;">
<div style=" display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"></div>
<div style=" max-width: 900px; margin: 0 auto;" class="email-container">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #dedede; margin: auto;">
<tr>
<td valign="middle" class="hero bg_white" style="background-color: #dedede; padding: 2em 0 2em 0;">
<div class="text-author" style="border-radius: 20px;background-color: #ffffff;border-color: #ffffff; ">
<table table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="{LOGO_1}" style="height: 100px; width: auto;">
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 600; font-size: 25px; color: #171717;">Olá,</h3>
<span class="position">{content}</span>
</td>
</tr>
<tr >
<td style="text-align: center;">
<p><a class="btn btn-white-outline" style="width: 94%;">{btn_1_content}</a></p>
<p>{btn_2_content}</p>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div style="height: 10px;"></div>
<span class="position" style="color: #dbdbdb;">Este é um e-mail enviado automaticamente.</span>
<div style="height: 10px;"></div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="separator" style="background-color: #d7d7d7; height: 1px;"></div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div style="height: 20px;"></div>
<span class="position" style="color: #dbdbdb;">Se você já realizou o pagamento desse boleto desconsidere esse e-mail.</span>
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 250; font-size: 16px; color: #171717;">Abraços,</h3>
<h3 class="name" style="font-weight: 600; font-size: 16px; color: #171717;">Equipe Acalanto.</h3>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div>
<img src="{LOGO_2}" height="60px">
<h3 style="color: #898989; font-size: 14px;">© Organização Diamante LTDA</h3>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I have no idea on how to use any kind of template with Gmail API. If Gmail API isn't the "go" for this case please let me know, I don't mind to use othe types of e-mail services but I really like Google stuff, but, in this case they don't have any info on .NET c# or even on how to use templates.

SOLUTION
After some thought I found the solution.
In the line of code:
tring message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
I just replaced <h1>{email.content}</h1> with File.ReadAllText("PATH_TO_HTML_FILE") and that was it. Sorry for the dumb question. In my opinion, Google should update their Gmail API documentation and examples, because I don't think anyone will go to the trouble of implementing a e-mail api and e-mail system to send simple e-mails with plain text and images.

razor page CSS is not working isolated, only with the style tag at the top

The question is almost self-explanatory. I have the razor component "board.razor" and it also has a "board.razor.css" which contains all the styles for that page. If I do it like that, then the styles won't get applied. If I insert the style classes on the top of the "board.razor", everything works like it should. I'll provide the code and the pictures for you.
Board.razor with style tag at top:
<style>
.dropzone {
padding: 10px;
background: #e2eaf2;
list-style: none;
height: 100%;
min-width: 50%;
}
.no-drop {
border: 2px dashed red;
background-color: #e6d8d8;
}
.can-drop {
border: 2px dashed green;
background-color: #d8e6d8;
}
.draggable {
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
margin-bottom: -8px;
padding: 10px;
cursor: move;
background: #fff;
color: #000;
border-radius: 3px;
max-width: 500px;
}
.draggable:active {
cursor: move;
background: #f1f8ff;
}
.draggable:hover {
cursor: move;
background: #f1f8ff;
}
h6 {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.dragging {
cursor: move;
}
.description {
font-size: 14px;
}
.sum {
font-size: 17px;
word-wrap: break-word;
color: midnightblue;
font-weight: bold;
}
.last-updated {
margin-bottom: 0;
font-size: 11px;
color: #474747;
font-weight: bold;
}
.last-updated small {
text-transform: uppercase;
color: #474747;
font-size: 11px;
}
h6 {
width: 100%;
height: auto;
}
.scrollbar {
top: 0;
bottom: 0;
overflow: hidden;
overflow-y: auto;
}
.status-details[open] {
transition: height 3s;
}
.status-details-summary {
padding: 1px 0px 1px 8px;
position: sticky;
top: 3rem;
bottom: 0;
z-index: 20;
font-size: 12px;
background-color: white;
}
.status-container {
display: flex;
}
.status-list {
display: flex;
flex-direction: column;
padding: 5px;
width: 100%;
}
.status-header {
display: flex;
position: sticky;
top: 0;
background-color: white;
z-index: 21;
}
.status-header-item {
font-weight: bold;
margin: 5px;
margin-bottom: -5px;
padding: 10px;
background: #e2eaf2;
flex-direction: column;
display: flex;
width: 100%;
}
#bsettings {
text-decoration: none;
color: inherit;
cursor: default;
display: block;
}
<NavBar OnIssueCreated="LoadIssues"></NavBar>
<div class="bodyContainer">
#if (changeMenuShow)
{
<h3 style="padding-left:5px"><b>Aktive Sprints</b></h3>
}
#*<FilterBar AllIssues="issues"></FilterBar>*#
<div class="dropdown">
<button class="btn btn-blue" style=" float: right; height: 38px; width: 41px; margin-left: 10px" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="oi oi-cog"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-item">Board Einstellungen(unfertig)</li>
#*<li class="dropdown-item" #onclick="ModalShow">Board erstellen</li>*#
#if (changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs ausblenden</li>
}
else if (!changeMenuShow)
{
<li class="dropdown-item" #onclick="MenuShow">Menüs einblenden</li>
}
#if (dialogType.Equals(EditDialogType.Sidebar))
{
<li class="dropdown-item" #onclick="DialogToModal">Vorgänge im Dialogfeld öffnen</li>
}
else if (dialogType.Equals(EditDialogType.Modal))
{
<li class="dropdown-item" #onclick="DialogToSidebar">Vorgänge in der Seitenleiste öffnen</li>
}
</ul>
</div>
#if (activeSprint != null)
{
<div style="float: right; margin-left: 10px ">
<button style="height: 38px;" class="btn btn-blue" #onclick="Complete">Sprint abschließen</button>
</div>
}
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top: 8px; margin-left: 10px">
<input type="checkbox" class="custom-control-input" id="addMorebox" #bind="ShowOpenForToday" />
<label class="custom-control-label" for="addMorebox">Heute zu erledigen anzeigen</label>
</div>
<div class="custom-control custom-switch" style="display: inline; float: left; margin-top:8px; margin-left: 10px;">
<input type="checkbox" class="custom-control-input" id="addWaitReply" #bind="showWaitForReply" />
<label class="custom-control-label" for="addWaitReply">Warte auf Rückmeldung anzeigen</label>
</div>
<br />
<br />
<br />
<IssueDialogOpener DialogType="dialogType">
<div class="scrollbar" style="height: 70vh; ">
<header class="status-header">
<div class="status-header-item">Zu Erledigen</div>
#if (ShowOpenForToday)
{
<div class="status-header-item">Heute zu Erledigen</div>
}
#if (showWaitForReply)
{
<div class="status-header-item" style="display: inline;">Warte auf Rückmeldung</div>
}
<div class="status-header-item">In Arbeit</div>
<div class="status-header-item">Fertig</div>
</header>
<div>
#if (parentIssues.Count > 0)
{
#foreach (var issue in parentIssues)
{
<SubtaskStatusContainer Issue="issue" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></SubtaskStatusContainer>
}
#if (issues.Count != 0)
{
<StatusContainer Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
}
else if (issues.Count != 0)
{
<StatusContainer IsWithoutSubtasks=true Issues="#issues" ShowOpenForToday="#ShowOpenForToday" showWaitForReply="#showWaitForReply" OnChange="LoadIssues"></StatusContainer>
}
</div>
</div>
</IssueDialogOpener>
</div>
How it looks:
How it looks with styles isolated in the board.razor.css:

For CSS from an Isolated css file to work in a sub component you need to use the ::deep operator. DOCS

Push all styles back to Board.razor.css file
If your application is server-side then make sure if you have this line in your _Layout.cshtml
And if your application is Web Assembly then make sure this line is in your index.html file
<head>
<link href="yourprojectname.styles.css" rel="stylesheet" />
</head>

asp.net webforms with js

How do you use a normal js script with normal html code in a webform? I have this code below but when it runs the div tags display on the page for two seconds then they disappear. When checking the elements i see that the div tag is being assigned the class aspNetHidden. How can i fix this?
HTML code:
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="Images/slide1.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="Images/slide2.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="Images/slide3.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="Images/slide4.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="Images/slide5.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="Images/slide6.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="Images/slide7.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="Images/slide8.png" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="Images/slide9.png" style="width:100%">
</div>
js Code:
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
If relevant, the css code:
<style>
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>

You can add your code segments within the content tags, I just tried and it worked. refer the code below. Simply you can create a new web application with site.master files and you can add your code segments in the aspx file
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 9</div>
<img src="Images/slide1.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 9</div>
<img src="Images/slide2.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 9</div>
<img src="Images/slide3.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 9</div>
<img src="Images/slide4.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 9</div>
<img src="Images/slide5.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 9</div>
<img src="Images/slide6.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 9</div>
<img src="Images/slide7.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8 / 9</div>
<img src="Images/slide8.png" style="width: 100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9 / 9</div>
<img src="Images/slide9.png" style="width: 100%">
</div>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
<style>
* {
box-sizing: border-box;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: .4;
}
to {
opacity: 1;
}
}
</style>

Okay so it turns out it was just a css error, the fade was kicking in before the code could run. just remove fade from all the tags and it works.

3 Flexible divs inside a flexible parent div

I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,
the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.
The problem I am having is the background and footer slam to the left and the button divs go right.
My JSFIDDLE
HTML:
<div id="container">
<div id="footer">
<div id="left">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
</div>
<div id="middle">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
</div>
<div id="right">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
</div>
</div>
</div>
CSS:
#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}
#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}
#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}
#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}
.imgstretch {
width:100%;
}

You have a couple of things going on.
1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.
2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.
3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.
I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 780px;
max-height: 80px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
position: fixed;
bottom: 0;
background-color: #009FC1;
}
.footer-element-lg {
float: left;
width: 36%;
max-width: 280px;
position: relative;
}
.footer-element-sm {
float: left;
width: 28%;
max-width: 220px;
position: relative;
}
#left {
background-color: #CCCCCC;
}
#middle {
background-color: #889FC1;
}
#right {
background-color: #9999DD;
}
.imgstretch {
width:100%;
border: none;
}
<div id="container">
<div id="footer">
<div id="left" class="footer-element-lg">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
</div>
<div id="middle" class="footer-element-sm">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
</div>
<div id="right" class="footer-element-lg">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
</div>
</div>
</div>
I removed a 20px margin and made the spacing as a 20px padding for continuity sake.

Why do my pictures in a asp image control look squashed?

I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}

Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.

Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.

Categories

Resources