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).
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'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
I'm using nopcommerce 3.80 for my site and wanted to use vertical full width slides on home page. I used Jssor slider jquery in place of nivo by editing my Nivo slider plugin. I'm able to see a vertical slider at homepage now, but it is giving a horizontal scroll bar and the image is not extending to full width instead it is giving white blank space in the right side. And also the scrollbar is making the page in the right side with white space and below the slider also. Please see the attached image for reference. Below also is the jssor slider plugin. Any help would be appreciated.
#model Nop.Plugin.Widgets.NivoSlider.Models.PublicInfoModel
#{
Layout = "";
Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jssor.slider-21.1.6.min.js");
#*Html.AddScriptParts("~/Plugins/Widgets.NivoSlider/Scripts/jquery.nivo.slider.js");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/nivo-slider.css");
Html.AddCssFileParts("~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/custom/custom.css");*#
}
#using Nop.Web.Framework.UI
#helper RenderSliderLine(string pictureUrl, string text, string link, string dataTransition = "")
{
if (!string.IsNullOrEmpty(pictureUrl))
{
if (!string.IsNullOrEmpty(link))
{
<a href="#link">
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
</a>
}
else
{
<img src="#pictureUrl" data-thumb="#pictureUrl" data-transition="#dataTransition" alt="" title="#text" />
}
}
}
<script type="text/javascript">
jssor_1_slider_init = function () {
var jssor_1_options = {
$AutoPlay: true,
$DragOrientation: 2,
$PlayOrientation: 2,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<style>
/* jssor slider arrow navigator skin 08 css */
/*
.jssora08l (normal)
.jssora08r (normal)
.jssora08l:hover (normal mouseover)
.jssora08r:hover (normal mouseover)
.jssora08l.jssora08ldn (mousedown)
.jssora08r.jssora08rdn (mousedown)
*/
.jssora08l, .jssora08r {
display: block;
position: absolute;
/* size of arrow element */
width: 50px;
height: 50px;
cursor: pointer;
background: url('~/Plugins/Widgets.NivoSlider/Content/nivoslider/themes/a08.png') no-repeat;
overflow: hidden;
opacity: .4;
filter: alpha(opacity=40);
}
.jssora08l {
background-position: -5px -35px;
}
.jssora08r {
background-position: -65px -35px;
}
.jssora08l:hover {
background-position: -5px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08r:hover {
background-position: -65px -35px;
opacity: .8;
filter: alpha(opacity=80);
}
.jssora08l.jssora08ldn {
background-position: -5px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
.jssora08r.jssora08rdn {
background-position: -65px -35px;
opacity: .3;
filter: alpha(opacity=30);
}
</style>
<div class="slider-wrapper theme-custom" id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture1Url, Model.Text1, Model.Link1)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture2Url, Model.Text2, Model.Link2)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture3Url, Model.Text3, Model.Link3)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture4Url, Model.Text4, Model.Link4)
</div>
<div data-p="112.50" style="display: none;">
#RenderSliderLine(Model.Picture5Url, Model.Text5, Model.Link5)
</div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora08l" style="top:8px;left:8px;width:50px;height:50px;" data-autocenter="1"></span>
<span data-u="arrowright" class="jssora08r" style="bottom:8px;right:8px;width:50px;height:50px;" data-autocenter="1"></span>
<script type="text/javascript">jssor_1_slider_init();</script>
</div>
I am trying to locate the drop down box using C# in selenium webdriver. Tried with different
option like By.Id, By.XPath, But unable to locate the element. Below is the HTML code for
the same.
<div class="chzn-drop" style="left: -9000px; width: 387px; top: 32px;">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 352px;" tabindex="5">
</div>
<div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto;">
<ul class="chzn-results" style="overflow: hidden; width: auto;">
<div class="slimScrollBar" style="background: none repeat scroll 0% 0% rgb(0, 0, 0); width: 15px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 121.263px;"></div>
<div class="slimScrollRail" style="width: 15px; height: 100%; position: absolute; top: 0px; display: block; border-radius: 7px; background: none repeat scroll 0% 0% rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
</div>
</div>
Try By.Css, e.g.
driver.find(By.Css(".slimScrollDiv"));
Sample string:-
<div class="ui-droppable" id="ParentDIV" style="width: 286pt; height: 212pt; background-color: #00752d; background-image: none;">
<div class="be-canvas-grid" style="background-image: none">
<div style="width: 200px; height: 50px; top: 77px; left: 162px; font-family: Arial; font-size: 12pt; color: rgb(0, 0, 0); overflow: hidden;" data-uid="2" class="be-component be-text ui-draggable ui-droppable">
<span>hello from simple text</span>
</div>
<div style="width: 161.567px; height: 39.5667px; top: 127px; left: 172px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="3" class="be-component be-text ui-draggable ui-droppable">
<span>{[C-FULLNAME:LC]}</span>
</div>
<div style="width: auto; height: auto; top: 196px; left: 216px;" data-uid="4" class="be-component be-image ui-draggable">
<img src="https://localhost/a/images/BarcodeType1.jpeg" data-qrstub="" alt="">
</div>
<div style="width: 200px; height: 50px; top: 6px; left: 12px; font-family: Arial; font-size: 12pt; color: rgb(201, 87, 201); overflow: hidden;" data-uid="5" class="be-component be-text ui-draggable ui-droppable">
<span>asd</span>
</div>
</div>
</div>
I want to pull the ParentDIV elements's style properties i.e. width and height. Then I want to update the width and height css properties with my values. The order of height and width properties in the style tag of ParentDIV may get changed also.
Please suggest the regex. I would be making this code changes in C#.net.
Regex expression can build with the help of online tool http://www.gskinner.com/RegExr/.