I'm working on a simple HTML template for invoices, so the first part consists of logo at the right side and below it three columns, so HTML works very well, then I use HtmlToPdf C# library to convert this to pdf as:
var converter = new HtmlToPdf();
var today = DateTime.UtcNow;
var fileName = $"test- {today}";
var doc = converter.ConvertHtmlString(html);
using var ms = new MemoryStream();
ms.Position = 0;
doc.Save(ms);
var res = ms.ToArray();
doc.Close();
return File(res, "application/pdf", fileName);
So it generate the file correctly but for some reason it is not three column anymore, it make three different rows with one column each one:
Header snippet
#page {
background: #ffffff;
width: 878px;
margin: 0 auto;
margin-top: 40px;
display: block;
border: 1px solid #c4c7c7;
padding: 40px 40px 50px 40px;
position: relative;
z-index: 0;
}
.header__container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding-top: 20px;
}
.recipient__address {
padding-top: 60px;
width: 200px;
}
.shipper__address {
padding-top: 60px;
text-align: center;
}
.company__address {
right: 40px;
padding-top: 60px;
text-align: right;
}
<body>
<div id="page">
<div class="header__container">
<div>
<p class="recipient__address">
<strong>Ship From</strong><br /> {{ShipFromCompany}}
<br /> {{ShipFromAddressLineOne}}
<br /> {{ShipFromAddressLineTwo}}, {{ShipFromPostalCode}}<br /> {{ShipFromAttn}}
<br /> {{ShipFromPhone}}
</p>
</div>
<div>
<p class="shipper__address">
<strong>Shipper</strong><br /> {{ShipperCompany}} <br /> {{ShipperAttn}} <br /> {{ShipperAddressLineOne}} <br /> {{ShipperAddressLineTwo}}
</p>
</div>
<div>
<img src="images/company__logo.png" alt="logo" class="company__logo">
<p class="company__address">
<strong>Ship To</strong><br> {{ShipToCompany}}
<br> {{ShipToAddressLineOne}}
<br> {{ShipToAddressLineTwo}}, {{ShipToPostalCode}}<br> {{ShipToAttn}}
<br> {{ShipToPhone}}
<br>
</p>
</div>
<div>
<p>
<strong>Carrier:</strong>{{ShipToCarrier}}<br />
</p>
</div>
<div>
<p>
<strong>Due Date:</strong>{{ShipToDueDate}}<br />
</p>
</div>
</div>
</div>
</body>
How can I prevent it to create multiple rows when it converts to pdf document? Regards
I found the issue, apparently the htmltopdf conversion does not support CSS grid, so I changed to simple CSS as:
.header__container {
padding-top:80px;
}
.header__container::after {
content: "";
display: table;
clear: both;
}
.header__column {
float: left;
width: 33%;
}
Now it's working
Related
I have a map where anyone can add a custom marker with info and images.
I want to create for each marker with more than 1 image, a slider.
Now each marker looks something like that:
I want that if there are multiple images for lets say for 'n' markers, I want to make all the images hidden except the first one and make a slider for each one of them.
This is the code now:
foreach (var _Data in Model)
{
<div class="popup" id="overlay-container-#_Data.Id">
<div class="overlay">
<div class="content"> #*Content <-Text->*#
<div class="close-btn" onclick="togglePopup(#_Data.Id)">×</div>
<h3><u>Category</u>: #_Data.category</h3><br />
<h5><u>Title</u>: #_Data.title</h5>
<u>Description</u>: <br /> <textarea disabled cols="50" rows="10" style="resize:none; background: none; border:hidden" class="accept-policy"> #_Data.remarks </textarea> <br />
<b>Urgence</b>: #_Data.statUrgence <br />
<br />
<div id="slideshow-container" style="height:200px; width:380px; display: flex; overflow: hidden;"> #*The Images*#
#{
string #path = #_Data.path;
string ImgPath = #path.Substring(#path.IndexOf("Files") - 1, (#path.Length - (#path.IndexOf("Files") - 1)));
string[] ImgPathArray = ImgPath.Split('\\');
string[] filePaths = Directory.GetFiles(#path); // _Data.path
foreach (var file in filePaths)
{
var temp = file;
List<string> set1 = path.Split('\\').Distinct().ToList();
List<string> set2 = temp.Split('\\').Distinct().ToList();
var diff = set2.Count() > set1.Count() ? set2.Except(set1).ToList() : set1.Except(set2).ToList();
<img style="display: block; margin-left: auto; margin-right: auto; width: auto;"
src="~/#string.Join("/", ImgPathArray).Remove(0,1)/#string.Join("", diff)" />
}
}
</div>
<br />
</div>
</div>
</div>
<script> #*Display markers*#
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(#_Data.coordLat), parseFloat(#_Data.coordLong)]));
marker.setId(#_Data.Id);
//console.log(marker.getId());
markers.getSource().addFeature(marker);
</script>
}
<style> #*Style for the marker's popuop*#
.popup .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1;
display: none;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
width: auto;
height: auto;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn {
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 23.5px;
text-align: center;
border-radius: 50%;
}
.popup.active .overlay {
display: block;
}
.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}
</style>
You can use Bootstrap Image slider (carousel).
For example, you have a list of image paths：
#{
List<string> imagePath = new List<string>() { "/images/img1.jpg", "/images/img2.jpg", "/images/img3.jpg" };
}
Then you can use carousel to load images:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover">
<div class="carousel-inner" role="listbox">
#for (var i=0;i<imagePath.Count();i++)
{
var showClass = (i == 0 ? "active":"");
var path = imagePath[i];
<div class="item #showClass">
<div class="carousel-content">
<div style="margin: 0 auto">
<p>
<img src="#path" />
</p>
</div>
</div>
</div>
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"> Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-content {
color: black;
display: flex;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
Result:
If you want to have a carousel effect, set data-interval="2000" (2s switch).
Is this what you want?
I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated
On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)
I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
I am trying to create a news Homepage for clients to use in their Outlook homepage browser.
So far I have the below, which works in IE and Chrome and I am happy with the results:
As you can see, the thumbnail images are not being contained within the divs any more (looks like the background-size: cover; setting is not working in Outlook).
Can anyone suggest a way of achieving the same result in Outlook but without using the background-size: cover property? Code is at the bottom. Thank you
IE etc:
Outlook:
Code:
<div class="main">
<div class="article">
<div class="imageBox">
</div>
<div class="articleWrapper">
<h1> New Starter in PICN </h1>
<p> Monday, December 7, 2015 </p>
<p> We are delighted to welcome Joe Bloggs ... </p>
</div>
</div>
<div class="divider">
</div>
<div class="article">
<div class="imageBox">
</div>
<div class="articleWrapper">
<h1> New Starter in PICN </h1>
<p> Monday, December 7, 2015 </p>
<p> We are delighted to welcome Joe Bloggs ... </p>
</div>
</div>
<div class="divider">
</div>
<div class="article">
<div class="imageBox">
</div>
<div class="articleWrapper">
<h1> New Starter in PICN </h1>
<p> Monday, December 7, 2015 </p>
<p> We are delighted to welcome Joe Bloggs ... </p>
</div>
</div>
</div>
CSS:
html {
overflow-x: hidden;
}
.main {
position: absolute;
top: 300px;
width: 100%;
height: auto;
}
.topbar {
width: 100%;
height: 50px;
background: lightgray;
position: absolute;
top: 0px;
left: 0px;
}
#logo {
position: absolute;
top: 70px;
}
.pinkbar {
color: white;
position: absolute;
top: 200px;
width: 100%;
height: 50px;
background: pink;
}
.pinkbar h1 {
margin: 10px;
}
.imageBox {
float: left;
width: 200px;
height: 200px;
background-image: url(img/image1.jpg);
background-size: cover;
}
.article {
overflow: hidden;
}
.divider {
width: 100%;
height: 1px;
background: lightgray;
margin-top: 20px;
margin-bottom: 20px;
}
I was able to resolve this by retrieving the correct items from the SharePoint site.
In my C# code where I extract the images, adding ?RenditionID=6 to the end of the URL before saving as an image locally returned the thumbnail style I required (In this case I needed it to be a square - as it is displayed ont he main SharePoint page).
I have a HttpWebRequest from which the remote URL which returns an XML as reponse. Now, i want to parse this XML and read the content and show in to a DIV as HTML content.
Web Request:
protected string GetWebSiteContents(string url)
{
// Create HttpWebRequest
HttpWebRequest httpWebReq = (HttpWebRequest)WebRequest.Create(url);
httpWebReq.UserAgent = ".NET Framework Client";
HttpWebResponse httpWebRes = (HttpWebResponse)httpWebReq.GetResponse();
StreamReader sr = new StreamReader(httpWebRes.GetResponseStream());
// Read the stream a line at a time and place each one into the stringbuilder
System.Text.StringBuilder sb = new System.Text.StringBuilder();
string strLine;
while ((strLine = sr.ReadLine()) != null)
{
// Ignore blank lines
if (strLine.Length > 0)
sb.Append(strLine);
}
sr.Close();
httpWebRes.Close();
return sb.ToString();
}
enter code here
Show into Div:
result.InnerHtml = GetWebSiteContents(url);
From above code i am getting the XML Response from URL sent. Now, i want to show Parse this XML and show data into a DIV say div with id=result with runat=server.
Reuturned XML Response:
<?xml version="1.0" encoding="UTF-8"?><document><cert_link>http://certacell.com/embed/cert.html?certid=SEZQ-5701-X98H-72</cert_link><cert_id>SEZQ-5701-X98H-72</cert_id>**<cert_data>**<div id="certacell_cert"><link
href="http://www.certacell.com/static/css/certificate.bootstrap.css" rel="stylesheet" /><link href="http://www.certacell.com/static/css/certificate.new.css" rel="stylesheet" />
<style> hr { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: gray; border-image: none; border-right: 0 none; border-style: solid none none;
border-width: 1px 0 0; margin-bottom: 20px; margin-top: 20px;} a { color: #4067f9; text-decoration: none;} </style> <div class="container header col-lg-12" ><img style="margin-top: 1%;"
class="col-lg-3" src="http://www.certacell.com/static/images/cert/logo.png"><h1 style="margin-top: 2%; color: #ffffff; text-shadow: black 0.2em 0.2em 0.3em;" class="" > | Device History
Report</h1></div> <div class="separator container" ></div><div class="content container" style="padding-top: 1%;"><div class="col-lg-6 text-center"
style="padding-top: 4%;"><h4 class=""> Certification Created on: 12 Sep 2013 04:01pm </h4><h4 class=""> Unique Certification ID:</h4><h2 class=""> SEZQ-5701-
X98H-72</h2><div class=""></div> <div class="text-left col-lg-offset-2 clearfix"><hr class="col-lg-9" > <div class="clearfix"></div><span
style="margin-top: 10%; font-size: x-large"> Device Carrier: AT&T Wireless </span> <br class="clearfix"><span style="margin-top: 10%; font-size: x-large"> Device Manufacturer: NA
</span> <br class="clearfix"><span style="margin-top: 10%; font-size: x-large"> Device History: Clean </span></div></div> <div class="col-lg-6"> <br
class="clearfix"><div class="col-lg-offset-1"><div class="row"><img src="http://www.certacell.com/static/images/cert/check.png" class="col pull-left"> <span
style="font-size: large; padding-left: 4%; " class="col-lg-9"> This device is Clear for Activation on AT&T Wireless</span></div> <br class="clearfix"><div
class="row"><img src="http://www.certacell.com/static/images/cert/check.png" class="col pull-left"> <span style="font-size: large; padding-left: 4%;" class="col-lg-9"> This
device is Certified to be an Authentic NA Device</span></div> <br class="clearfix"><div class="row"><img src="http://www.certacell.com/static/images/cert/check.png"
class="col pull-left"> <span style="font-size: large; padding-left: 4%; padding-top: 10px;" class="col-lg-9"> This device has NOT been reported lost or stolen </span></div></div>
<br class="clearfix"><div style="color: gray; font-size: larger">To verify this ceriticate’s authenticity please visit <a href="http://www.certacell.com"
target="_blank">www.CertaCell.com</a>.<br class="clearfix"> Certificate is subject to Certacell <a href="http://www.certacell.com" target="_blank">terms and
conditions.</a></div></div></div><div class="separator container" ></div></div>**</cert_data>**<clean>True</clean></document>
Is it possible to return the data of '**cert_data tag ' and show as html to a DIV ?**
Help appreciated!
CSS:
#header_bar
{
background-repeat: repeat-x;
width:100%;
}
.langpnl
{
float:right;
padding-top: 2px;
padding-right: 0px;
position:relative;
width:45px;
height:16px;
font-size:7pt;
}
#imgLogo
{
width: 156px;
height: 42px;
}
<!-- header.ascx -->
<div id="header_bar">
<div align="center">
<a href="<%=AppPath%>" target="_parent" >
<img id="imgLogo" runat="server" src="~/images/UI/logo.jpg" border="0" /></a>
<asp:DropDownList ID="ddlLanguage" class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged">
<asp:ListItem Value="">EN</asp:ListItem>
<asp:ListItem Value="es-ES">ES</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- /header.ascx -->
I am trying to align image in the center and dropdown box to the right top corner. Currently I am able to do it but the Image is slighty to the left. If I remove the dropdown box only then it gets in the center.
In the system browsers you cannot figure it out but this is a mobile website & in mobile view you can figure out the difference.
Here's one way to achieve what you're looking for:
http://jsfiddle.net/NzZak/
You could absolutely position the dropdown - DEMO
<!-- header.ascx -->
<div id="header_bar">
<div id="header_logo_holder">
<a href="<%=AppPath%>" target="_parent" >
<img id="imgLogo" runat="server" src="~/images/UI/logo.jpg" border="0" /></a>
<asp:DropDownList ID="ddlLanguage" class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged">
<asp:ListItem Value="">EN</asp:ListItem>
<asp:ListItem Value="es-ES">ES</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- /header.ascx -->
CSS code for "header_logo_holder"
#header_logo_holder {
width: 156px;
margin:0px auto 0px auto;
}
Since your .langpnl has a position:relative it still takes up room in your positioning flow.
Try:
.langpnl {
position:absolute;
right: 0;
}
#header_bar {
position: relative;
}
#header_bar {
background-repeat: repeat-x;
width: 100%;
padding: 0;
margin: 0; /* New */
}
.langpnl {
float: right;
padding-top: 2px;
padding-right: 0px;
position: relative;
width: 45px;
height: 16px;
font-size: 7pt;
vertical-align: top; /* New */
}
#imgLogo {
width: 130px;
height: 35px;
text-align: center;
border:0px; /* New */
}
This solves that issue.