DOMPDF repeat element in dynamic page - dompdf

I am generating a report using dompdf. And tried repeating an element in a page where it could take up to 4 pages depending on the data. But it only created on the first page
Currently i have this html markup.
<html>
<head>
<style>
#page {
margin: .5in;
}
.footer{
position:fixed;
width:100%;
bottom:60px;
}
.page-3{
position:relative;
}
.repeat{
position:fixed;
width:100%;
top:10px;
}
</style>
</head>
<body>
<div class="page page-1">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="page page-2">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="page page-3">
<div class="content">
<div class="content-header repeat">
This must repeat in all pages generated
</div>
<div class="content-text">
atleast 2~4 pages
</div>
</div>
</div>
<div class="page page-4">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
Let's say .page-3 generated 3 pages. But the .repeat is only seen on the first page inside .page-3
I tried using a background image for .page-3 but it still the same and is shown only on the first generated page.
I using the 0.8.2 version of dompdf.


If anyone is having a same problem as i have. I end up using a page_script.
Since i know the first 2 pages are static and the last page is static, I accessed the $PAGE_NUM and place a condition like this
`
$pdf->page_script('
if( $PAGE_NUM != 1 ){ // 1st page has no header
$text = "";
if( $PAGE_NUM == 2 ){
$text = "This is 2nd page";
}else if( $PAGE_NUM > 2 && $PAGE_NUM < $PAGE_COUNT ){
$text = "This is the page 3 until before the last page";
}else if( $PAGE_NUM == $PAGE_COUNT ){
$text = "This is last page";
}
// setup postioning, color, size etc for design
// use $text as header text
$pdf->text( $posX, $posY, $text, $font, $size, $color);
}
');
`
And removed all <div class="content-header">...</div> in the HTML markup

Related

I m trying to get the output of owl carousel dynamically using bootstrap but didnot get the desired output in codeigniter framework 3.0.1 version

This is what i want to display as slider when it slides both the rows move left or right correspondingly
a b c
a b c
<>
but what i have got is given below
a b c
<>
While getting images from database can't get the logic to display it by two rows.How is it possible??
<?php if($sliderimages):?>
<div class="owl-carousel client-slider owl-theme">
<?php foreach($sliderimages as $sliderimage):?>
<div class="item">
<div class="product-box">
<div class="product-img">
<img src="<?php echo base_url('assets/sliders/'.$sliderimage->file_name)?>" class="img-full" alt="" />
</div>
</div>
</div>
<?php else: ?>
<h5 class="text-alter"> sliders are not available</h5>
<?php endif;?>
</div>
In static condition the html code be like
<div class="owl-carousel client-slider owl-theme">
<div class="item">
<div class="product-box">
<div class="product-img"><img src="images/logos/Acer.jpg" class="img-full" alt=""/> </div>
<div class="product-img"><img src="images/logos/Alfa.jpg" class="img-full" alt=""/> </div>
</div>
</div>
I have to display images in carousel in two rows dynamically from database as static condition i have given above.The images fetch from db are to be placed in two rows. How can i get the result as static condition .Can anyone help me to solve this

I have updated my answer. With a simple CSS and HTML hack you don't need to alter the Javascript code, but you need to set some margins in your CSS and at initiation of your owl-carousel. Start by creating a flat array with file names in the sort order you want. This could be done in a Codeigniter Controller method or in the View:
// CREATE A FLAT ARRAY WITH JUST THE FILE NAMES FROM YOUR ORIGINAL ARRAY OF PHP OBJECTS
foreach($sliderimages as $sliderimage){
$result[] = $sliderimage->file_name;
}
// YOU NOW HAVE A FLAT ARRAY WITH FILE NAMES IN THE SORT ORDER YOU WANT TO DISPLAY THEM
// FOR EXAMPLE: array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg');
// NOW WE NEED TO ALTERNATE THE SORT ORDER IN THE ARRAY.
// 1: SPLIT THE ARRAY IN THE MIDDLE AND CREATE TWO NEW...
list($array1, $array2) = array_chunk($result, ceil(count($result) / 2));
// 2: EMPTY THE RESULT ARRAY TO MAKE ROOM FOR THE NEW RESULT
$result = array();
// COMBINE THE TWO NEW ARRAYS INTO ONE ARRAY WITH AN ALTERNATE SORT ORDER
array_map(function($item1, $item2) use (&$result)
{
$result[] = $item1;
$result[] = $item2;
}, $array1, $array2);
// WE USE FILTER TO REMOVE ARRAY ITEMS WITH EMPTY STRINGS
$result = array_filter($result);
Now we got an array with alternate sort order that is needed to be able to display the images in the sort order that you want with this suggested solution.
Loop through your result array and print the HTML. Here you need to control the odd and even rows to get it right:
// CREATE A COUNTER TO CHECK ODD/EVEN ROWS
$counter = 1;
// NUMBER OF IMAGES TOTAL
$number_of_images = count($result);
// IF WE HAVE IMAGES...
if($number_of_images > 0){
//START OWL CAROUSEL DIV
echo '<div class="owl-carousel owl-theme">';
foreach($result as $img) {
if ($counter % 2 == 0){ // EVEN ROW
echo ' <div class="product-box"><div class="product-img"><img src="'.base_url('assets/sliders/'.$img).'" class="img-full" alt=""/></div></div>';
// CLOSE ITEM DIV ON ODD ROWS
echo '</div>';
} else { // ODD
//OPEN A NEW DIV ITEM ON ODD ROWS
echo '<div class="item">';
// ECHO THE DIV WITH THE IMAGE
echo ' <div class="product-box"><div class="product-img"><img src="'.base_url('assets/sliders/'.$img).'" class="img-full" alt=""/></div></div>';
// CHECK TO SEE IF THIS IS THE LAST ROW
if($counter==$number_of_images){
// CLOSE ITEM DIV ON LAST ROW
echo '</div>';
}
} // END ODD/EVEN CHECK
$counter++;
} // END FOREACH
//END OWL CAROUSEL DIV
echo '</div>';
// NO SLIDER IMAGES AVAILABLE
} else {
echo '<h5 class="text-alter"> sliders are not available</h5>';
}
Now you should have printed HTML looking something like this:
<div class="owl-carousel owl-theme">
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/1.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/4.jpg" class="img-full" alt=""/></div></div>
</div>
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/2.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/5.jpg" class="img-full" alt=""/></div></div>
</div>
<div class="item">
<div class="product-box"><div class="product-img"><img src="images/logos/3.jpg" class="img-full" alt=""/></div></div>
<div class="product-box"><div class="product-img"><img src="images/logos/6.jpg" class="img-full" alt=""/></div></div>
</div>
</div>
The only thing you then have left to do is to set the margins for the images in CSS:
.product-box { margin-bottom: 10px; }
And set the margin and the number of images to show per row upon initiation of you owl-carousel (change the item property to items:4 if you want to show four images/row):
$('.owl-carousel').owlCarousel({
margin:10,
items:3
});
And the results should become:
Codepen example
https://codepen.io/MicKri/pen/vYpjqPy
More reading and examples
Owl carousel multiple rows
https://w3codemasters.in/multiple-rows-carousel-by-owl-carousel/

KnockoutJS elements not rendered once loaded via Jquery Ajax function

I have loaded a sidebar over ajax however this html uses knockoutJS to render completely. I am wondering how to execute the KnockoutJs portions of this code.
The content below is loaded via jQuery ajax function and contains a number of knockout elements as well as some X Magento Init type scripts:
<div class=\"block filter\" id=\"layered-filter-block\" data-mage-init='{\"collapsible\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": false, \"collateral\": { \"openedState\": \"filter-active\", \"element\": \"body\" } }}'>
<div class=\"block-title filter-title\" data-count=\"0\">
<strong data-role=\"title\">Shop By<\/strong>
<\/div>
<div class=\"block-content filter-content\">
<strong role=\"heading\" aria-level=\"2\" class=\"block-subtitle filter-subtitle\">Shopping Options<\/strong>
<div class=\"filter-options\" id=\"narrow-by-list\" data-role=\"content\" data-mage-init='{\"accordion\":{\"openedState\": \"active\", \"collapsible\": true, \"active\": [0,1,2], \"multipleCollapsible\": true}}'>
<div data-role=\"collapsible\" class=\"filter-options-item\">
<div data-role=\"title\" class=\"filter-options-title\">Category<\/div>
<div data-role=\"content\" class=\"filter-options-content\">\n<ol class=\"items\">
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=143&q=ice+machine\">Front of House
<span class=\"count\">2<span class=\"filter-count-label\">items<\/span><\/span><\/a>
<\/li>
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=182&q=ice+machine\">Bar Supplies
<span class=\"count\">4<span class=\"filter-count-label\">items<\/span><\/span><\/a>
<\/li>
<li class=\"item\">
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=257&q=ice+machine\">Catering Equipment<span class=\"count\">111<span class=\"filter-count-label\">\n
items <\/span><\/span>\n
<\/a>\n <\/li>\n
<li class=\"item\">\n
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=342&q=ice+machine\">\n
Warewashing <span class=\"count\">\n
3 <span class=\"filter-count-label\">\n
items <\/span><\/span>\n
<\/a>\n <\/li>\n <li class=\"item\">\n
<a href=\"http:\/\/www.domain.com\/catalogsearch\/result\/index\/?ajax=1&cat=521&q=ice+machine\">\n
Catering Equipment Offers <span class=\"count\">\n 1
<span class=\"filter-count-label\">\n item <\/span><\/span>\n
<\/a>\n <\/li>\
<\/ol>
<\/div>\n
<\/div>\n
<div data-role=\"collapsible\" class=\"filter-options-item\">
<div data-role=\"title\" class=\"filter-options-title\">Brand<\/div>\n
<div data-role=\"content\" class=\"filter-options-content\">
<div data-bind=\"scope: 'brandFilter'\">
<!-- ko template: getTemplate() --> <!-- \/ko -->
<\/div>
<script type=\"text\/x-magento-init\">
{\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"brandFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":true,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=brand&q=ice+machine\",\"items\":[{\"label\":\"Scotsman\",\"count\":41,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Scotsman&q=ice+machine\",\"is_selected\":false},{\"label\":\"Hoshizaki\",\"count\":15,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Hoshizaki&q=ice+machine\",\"is_selected\":false},{\"label\":\"Ice-o-matic\",\"count\":12,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Ice-o-matic&q=ice+machine\",\"is_selected\":false},{\"label\":\"Blue Ice\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Blue+Ice&q=ice+machine\",\"is_selected\":false},{\"label\":\"Graupel\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Graupel&q=ice+machine\",\"is_selected\":false},{\"label\":\"Nemox\",\"count\":7,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Nemox&q=ice+machine\",\"is_selected\":false},{\"label\":\"Manitowoc\",\"count\":6,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Manitowoc&q=ice+machine\",\"is_selected\":false},{\"label\":\"Polar Refrigeration\",\"count\":5,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Polar+Refrigeration&q=ice+machine\",\"is_selected\":false},{\"label\":\"Longo & Co\",\"count\":4,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Longo+%26+Co&q=ice+machine\",\"is_selected\":false},{\"label\":\"Beaumont\",\"count\":3,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&brand=Beaumont&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Power<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div data-bind=\"scope: 'power_ddFilter'\">\n <!-- ko template: getTemplate() --> <!-- \/ko -->\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n {\"*\" : {\"Magento_Ui\/js\/core\/app\": {\"components\": {\"power_ddFilter\": {\"component\":\"Smile_ElasticsuiteCatalog\\\/js\\\/attribute-filter\",\"maxSize\":10,\"displayProductCount\":true,\"hasMoreItems\":false,\"ajaxLoadUrl\":\"http:\\\/\\\/www.domain.com\\\/catalog\\\/navigation_filter\\\/ajax\\\/?ajax=1&filterName=power_dd&q=ice+machine\",\"items\":[{\"label\":\"13 Amp (Plug)\",\"count\":111,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=13+Amp+%28Plug%29&q=ice+machine\",\"is_selected\":false},{\"label\":\"1 Phase (Hard Wired)\",\"count\":2,\"url\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&power_dd=1+Phase+%28Hard+Wired%29&q=ice+machine\",\"is_selected\":false}]}}}}}\n<\/script>\n\n<\/div>\n <\/div>\n <div data-role=\"collapsible\" class=\"filter-options-item\">\n <div data-role=\"title\" class=\"filter-options-title\">Price<\/div>\n <div data-role=\"content\" class=\"filter-options-content\"><div class=\"smile-es-range-slider\" data-role=\"range-price-slider-price\">\n <div data-role=\"from-label\"><\/div>\n <div data-role=\"to-label\"><\/div>\n <div data-role=\"slider-bar\"><\/div>\n <div class=\"actions-toolbar\">\n <div data-role=\"message-box\"><\/div>\n <div class=\"actions-primary\">\n <a class=\"action primary small\" data-role=\"apply-range\">\n <span>OK<\/span>\n <\/a>\n <\/div>\n <\/div>\n<\/div>\n\n<script type=\"text\/x-magento-init\">\n { \"[data-role=range-price-slider-price]\" : { \"rangeSlider\" : {\"minValue\":1,\"maxValue\":6091,\"currentValue\":{\"from\":1,\"to\":6091},\"fieldFormat\":{\"pattern\":\"\\u00a3%s\",\"precision\":2,\"requiredPrecision\":2,\"decimalSymbol\":\".\",\"groupSymbol\":\",\",\"groupLength\":3,\"integerRequired\":false},\"intervals\":[{\"value\":1,\"count\":1},{\"value\":2,\"count\":1},{\"value\":3,\"count\":1},{\"value\":40,\"count\":1},{\"value\":60,\"count\":1},{\"value\":64,\"count\":1},{\"value\":150,\"count\":1},{\"value\":179,\"count\":1},{\"value\":190,\"count\":1},{\"value\":242,\"count\":1},{\"value\":291,\"count\":1},{\"value\":325,\"count\":1},{\"value\":355,\"count\":2},{\"value\":395,\"count\":1},{\"value\":465,\"count\":1},{\"value\":472,\"count\":1},{\"value\":515,\"count\":1},{\"value\":520,\"count\":1},{\"value\":535,\"count\":1},{\"value\":555,\"count\":1},{\"value\":577,\"count\":1},{\"value\":585,\"count\":1},{\"value\":599,\"count\":1},{\"value\":605,\"count\":2},{\"value\":615,\"count\":1},{\"value\":640,\"count\":1},{\"value\":658,\"count\":1},{\"value\":685,\"count\":1},{\"value\":705,\"count\":1},{\"value\":730,\"count\":1},{\"value\":745,\"count\":2},{\"value\":785,\"count\":1},{\"value\":805,\"count\":1},{\"value\":830,\"count\":1},{\"value\":895,\"count\":2},{\"value\":925,\"count\":1},{\"value\":965,\"count\":1},{\"value\":970,\"count\":1},{\"value\":990,\"count\":2},{\"value\":1030,\"count\":1},{\"value\":1065,\"count\":1},{\"value\":1080,\"count\":1},{\"value\":1085,\"count\":1},{\"value\":1095,\"count\":1},{\"value\":1105,\"count\":1},{\"value\":1130,\"count\":1},{\"value\":1155,\"count\":1},{\"value\":1225,\"count\":1},{\"value\":1235,\"count\":1},{\"value\":1240,\"count\":1},{\"value\":1259,\"count\":1},{\"value\":1310,\"count\":1},{\"value\":1360,\"count\":1},{\"value\":1365,\"count\":1},{\"value\":1450,\"count\":1},{\"value\":1485,\"count\":1},{\"value\":1495,\"count\":1},{\"value\":1510,\"count\":1},{\"value\":1580,\"count\":2},{\"value\":1605,\"count\":2},{\"value\":1685,\"count\":1},{\"value\":1710,\"count\":1},{\"value\":1779,\"count\":1},{\"value\":1785,\"count\":1},{\"value\":1865,\"count\":1},{\"value\":1870,\"count\":1},{\"value\":1885,\"count\":1},{\"value\":1890,\"count\":1},{\"value\":1970,\"count\":1},{\"value\":1995,\"count\":1},{\"value\":2000,\"count\":1},{\"value\":2050,\"count\":1},{\"value\":2130,\"count\":1},{\"value\":2199,\"count\":1},{\"value\":2220,\"count\":1},{\"value\":2345,\"count\":1},{\"value\":2350,\"count\":1},{\"value\":2360,\"count\":1},{\"value\":2405,\"count\":1},{\"value\":2415,\"count\":1},{\"value\":2445,\"count\":1},{\"value\":2450,\"count\":2},{\"value\":2480,\"count\":1},{\"value\":2500,\"count\":1},{\"value\":2530,\"count\":1},{\"value\":2565,\"count\":1},{\"value\":2570,\"count\":1},{\"value\":2595,\"count\":1},{\"value\":2695,\"count\":1},{\"value\":2730,\"count\":1},{\"value\":2825,\"count\":1},{\"value\":2850,\"count\":1},{\"value\":2950,\"count\":1},{\"value\":2995,\"count\":1},{\"value\":3010,\"count\":1},{\"value\":3025,\"count\":1},{\"value\":3145,\"count\":1},{\"value\":3205,\"count\":1},{\"value\":3295,\"count\":1},{\"value\":3300,\"count\":1},{\"value\":3485,\"count\":1},{\"value\":3495,\"count\":1},{\"value\":3580,\"count\":1},{\"value\":4015,\"count\":1},{\"value\":4075,\"count\":1},{\"value\":4305,\"count\":1},{\"value\":4310,\"count\":1},{\"value\":4595,\"count\":1},{\"value\":4620,\"count\":1},{\"value\":5250,\"count\":1},{\"value\":5355,\"count\":1},{\"value\":6090,\"count\":1}],\"urlTemplate\":\"http:\\\/\\\/www.domain.com\\\/catalogsearch\\\/result\\\/index\\\/?ajax=1&price=<%- from %>-<%- to %>&q=ice+machine\",\"messageTemplates\":{\"displayCount\":\"<%- count %> products\",\"displayEmpty\":\"No products in the selected range.\"},\"rate\":1}
} }
<\/script>
<\/div>
<\/div>
<\/div>
<\/div>
<\/div>
These are then added to a block on my page via html jQuery method:
$(sidebarBlock).html(this.filters);
Looking at the DOM I cannot actually see the scripts however they are there in response when reviewing with console.log(). Similarly the below shows the scripts are present:
$(sidebar).find("script").each(function() {
console.log("found a script");
}
I have tried to use .trigger('contentUpdated'); like below:
document.getElementById("layered-filter-block").innerHTML = this.filters;
$(sidebarBlock).trigger('contentUpdated');
and:
$(sidebarBlock).html(this.filters);
$(sidebarBlock).trigger('contentUpdated');
and by reapplying bindings for knockout:
ko.cleanNode($('#layered-filter-block'));
ko.applyBindings($('#layered-filter-block'));
The above throws an error about bindings already being applied however but I have used cleanNode before to unbind however error persists.

This fixed issue for me:
$(sidebarBlock).applyBindings();
https://codeblog.experius.nl/magento-2-uicomponent-reinit-ajax-reload/

barryvdh/laravel-dompdf page break content changes PDF

I am using this package barryvdh/laravel-dompdf is there any way to detect if content fits on the current page if not I want to put that content to the next page if it does not fit completly.

This is said in the documentation about the asked subject: https://github.com/barryvdh/laravel-dompdf
Tip: Page breaks
You can use the CSS page-break-before/page-break-after properties to create a new page.
<style>
.page-break {
page-break-after: always;
}
</style>
<h1>Page 1</h1>
<div class="page-break"></div>
<h1>Page 2</h1>
Update, you can iterate through the items and call for example after 10 divs:
<?php $i=0 ?>
#foreach($array as $object)
<?php $i++ ?>
<!-- do something here | divs -->
if( $i % 10 == 0 ){
echo '<div class="page-break"></div>'; ....
}
#endforeach
You will have to determine yourself how many divs you can show to fill a page. An A4 paper for example has always the same height so you could make a guess of how many of your divs can be displayed on this page.

This is how you do it. Put this code on your CSS
<style>
.page-break {
page-break-after: always;
}
</style>
Then use
<h1>Page 1</h1>
<div class="page-break"></div>
<h1>Page 2</h1>

How to use ngStyle for background url in Angular 4

I have below html:
<li>
<div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
Problem:
I want to replace image url /assets/images/2.jpg with dynamic variable like {{ article.uri }}.
I tried with several way from below ref:
Attribute property binding for background-image url in Angular 2
How to add background-image using ngStyle (angular2)?
Tried so far:
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
I am using Angular 4.1.3.

background-url is incorrect CSS, use background or background-image instead.
Here is an example of correct syntax:
<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div>
Your full example would look like this:
<li *ngFor="let article of arr; let i=index;" >
<div *ngIf="i == 0"
class="w3l_banner_nav_right_banner"
[ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" >
<h3> Make your <span>food</span> with Spicy. </h3>
<div class="more">
Shop now1
</div>
</div>
</li>

If you're getting your background image from a remote source or a user input you will need to have angular sanitize the url. In your component you will want to add the following bits of code...
import { DomSanitizer } from '#angular/platform-browser';
export class YourComponent {
constructor(private _sanitizer: DomSanitizer) { }
public sanitizeImage(image: string) {
return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
}
}
Try setting your HTML to this...
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [style.background-image]="sanitizeImage(article.uri)">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
And apply the no-repeat 0px 0px; in some class you attach to the div.

The correct answer is [style.background-image]="'url(' + article.uri + ')'"
but if you are using ngFor for carousel, make sure you have added class 'active' properly.
This code will NOT working:
<div class="carousel-item active"
*ngFor="let article of arr;"
[style.background-image]="'url(' + article.uri + ')'"></div>
You should use 'active' class for first item only!
<div class="carousel-item"
*ngFor="let article of arr; let i = index;"
[ngClass]="{'active': i === 0}"
[style.background-image]="'url(' + article.uri + ')'"></div>

you can use it by adding url path in a single variable.
for example
bgImageVariable="www.domain.com/path/img.jpg";
[ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}"

Working for Angular 8+ (Power of template literals):
In component, define ngStyle object var (here called as styles, initialised in constructor):
const bgImageUrl = 'assets/images/dot-grid.png'
const styles = {
backgroundImage: `url(${bgImageUrl})`
};
In template, assign this as ngStyle
<div [ngStyle]="styles"><!-- your content --></div>

In my case the following syntax worked:
<ion-slide *ngFor="let page of pages">
<div class="cardImage" style.background-image="url('{{ page.imageUrl }}')"></div>
</ion-slide>
Ionic CLI : 6.16.3

This works fine for me:
js file:
path = 'url(../assets/about.png)';
array:
string[] = [this.path];
and HTML file:
<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">

To solve this, the correct syntax is
<div class="modalContainer"
ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">
Mark answer if it helps.

Seleium/Ruby - can't access save button in a modal popup

For the life of me I cannot get control of anything in this modal. I just want to click on this dang save button.
For all the other modals that are like this I am able to use this code successfully:
#driver.switch_to.frame #driver.find_element(:xpath, "//*[contains(#name, 'modal')]")
I get a not found error this time around though.
Here's the html of the modal i'm trying to access -NOTE the modal number changes so I can't hard code modal3:
and here's the html for the button:
<html class=" ext-strict">
<head>
<body class=" ext-gecko ext-gecko2" keydownhandlerset="true">
<div id="patientChartsContainer">
<div id="patientSearch" style="display:none">
<div class="tooltipWrapper">
<div id="patientPhotoContainer"></div>
<div id="modalWindowContainer" class="">
<div class="axShadowLayer window local" style="display: block; width: 558px; height: 453px; left: 384px; right: auto; top: 228px; z-index: 1010;">
<div class="axShadowTopRow">
<div class="axShadowMiddleRow">
<div class="axShadowBottomRow">
<div class="axShadowContentLayer">
<div class="priModalWrapper">
<ul class="priModalHeader">
<div class="priModalContentBackground"></div>
<ul class="priModalFooter">
<div class="priModalContentWrapper">
<div class="priModalContentContainer">
<iframe id="modal1" class="windowFrame" name="modal1" src="/chart/ui/desktop/patientCharts/chartSummary/chartNote/createChartNote/createNoteModal.html" allowtransparency="true" frameborder="0">
<!DOCTYPE html>
<html class=" ext-strict" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class=" ext-gecko ext-gecko2" keydownhandlerset="true">
<div id="newNoteContainer" class="newEncounterNote">
<ul class="newNoteOptions">
<div class="axModalButtonsFooter">
<div class="footerButtonsWrapperRight">
<div class="buttonClass axSaveButton">
<span>Save</span>
I've tried a few things and variations of what I have below:
##driver.find_element(:xpath, "//div[#id='modalWindowContainer']/div/div[4]/div/ul/li/div[2]/div[3]").click
##driver.switch_to.frame #driver.find_element(:xpath, "//*[contains(#name, 'modal')]")
##driver.switch_to.default_content
##driver.switch_to.frame(#driver.find_element(:class, 'windowFrame'))
##driver.find_element(:css, "div.buttonClass.axSaveButton").click
##driver.switch_to.frame #driver.find_element(:class, 'windowFrame')
##driver.find_element(:xpath => "//button/span[contains(text(),'Save')]").click
/html/body/div1/div/div/div/span

Try:
##driver.switch_to.default_content
##driver.switch_to.frame #driver.find_element(:class, 'windowFrame')
##driver.find_element(:css, "div.buttonClass.axSaveButton > span").click
This will:
reset the frame context
find the proper iframe
Click on the span (which has the save text, and might hold the listener) element in the <div class="buttonClass axSaveButton"> tag

Resources