I have to build a template to send for mail using mjml with jinja2 template. I have inserted an image. After sending the mail the image only shows up in the Gmail web version, mobile version (Gmail app) the image can't load (it display a blue box with a question mark). I got the same problem with outlook. The image was stored in google photoes. I wonder why I have tried , the image inside raw with all attributes image as background-url inside a div but nothing worked for me!! How could I possibly encounter this issue?
<!--chart-->
<mj-section border-left="solid 2px #bebebe" border-right="solid 2px #bebebe">
<mj-column>
<mj-text align="center">
<!--Svg have not worked for me since it is not supported-->
<!-- <mj-raw>
<div class="chart flex col center">
{{data.chart|safe}}
</div>
</mj-raw> -->
<!-- mj-image does not display in mobil-->
<!-- <mj-image align="center" src="{{data.chart}}" /> -->
<!-- background URL also -->
<mj-raw>
<div class="chart flex col center" style="width: 100%; height:350px; display: block; background: url({{data.chart}}); background-size: contain; backgound-repeat:no-repeat; background-position: center;">
</div>
</mj-raw>
<!-- Simple image also-->
<!-- <mj-raw>
<div class="chart flex col center">
<img src={{data.chart}} width="200" alt="report" title="report" height="400px" style="display:block">
</div>
</mj-raw> -->
</mj-text>
</mj-column>
</mj-section>
<!--/chart-->
Related
I have a HTML email designed in tables to support older email clients. I am using sendgrid so the image value is displayed using an {{#each}}
This works fine on most newer clients and browsers but on Mac Mail and Outlook up to 2016 the main image does not show the first time you view the email. If you view another email in your inbox and go back to that one it magically appears. Also once its cached it will appear every time.
This is how I am displaying the image.
<td class="img-container">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
Im adding this here because I couldnt find any way to solve this by searching. I hope this helps you. To solve this weird bug you need to reserve the space in your HTML for the img. You can do that with a width and height style on the td
<td class="img-container" style="width: 100%; height: 380px;">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
I'm using ZKOSS 6.5.3 framework with Eclipse and Maven.
In my app, I've written a simple zul file as follows:
index.zul
<?page title="Test Exam" contentType="text/html;charset=UTF-8"?>
<zk xmlns:w="http://www.zkoss.org/2005/zk/client">
<window id="test_exam" title="Test Exam"
apply="zkoss.controller.LoginComposer"
style="padding: 0px; margin: 0px; border:1px solid red; height:500px; width:900px; display:block">
<borderlayout id="main">
<north>
<vlayout style="padding:5px">
<label id="testExamTitle" style="display:block">Exam Title</label>
<label id="testExamDesc" style="display:block">Exam Description</label>
<textbox style="border: 1px solid blue; display: inline-block;" tabindex="1" type="text" width="100px" height="100px"></textbox>
</vlayout>
</north>
</borderlayout>
</window>
</zk>
I've deployed this app on Tomcat 7(Eclipse). When I run the app & try to access this zul file in Chrome, instead of being rendered as a page with 2 Labels and 1 Textbox, it is being loaded as the HTML file itself as if I'm just opening the zul file in browser without deploying on server. It works perfectly on Firefox.
I've visited this link whereas the similar problem is raised, but that also does not contain any solution.
Can anyone help me solve this issue?
I put two images side by side on one page under the header as col-50. The issue is I want both images the full 50% width without any padding around any edges. I can't seem to figure it out with CSS
<div class="col col-50 row-no-padding">
<img src="img/facebook.jpg" style="width:100%; display: inline-block">
</div>
<div class="col col-50 row-no-padding">
<img src="img/twitter.jpg" style="width:100%; display: inline-block">
</div>
The above worked in my browser (ionic serve) but did not work on my device.
the problem is images are considered to be inline, as a result any white space is considered as space, try this:
<!-- both images should be in-line to have it working -->
<img style="width:50%; display: inline-block" src="the_image_source"/>
<img style="width:50%; display: inline-block;" src="the_image_source/>
you can also isolate the css if you wish
img{
style: inline-block;
width: 50%;
}
You could just use :
no-padding
to the col div
<ion-row>
<ion-col col-6 no-padding></ion-col>
<ion-col col-6 no-padding></ion-col>
</ion-row>
See Ionic Documentation for Grid
Hope this helps.
I have tried searching for a solution everywhere but could not find it. Hence posting a request here.
We have a website built on php code-ignition MVC framework, but the issue is with HTML rendering over various devices imo. a certain section on the bottom of the a rendered page disappears on iphone, it renders fine on ipad and normal browser. I have saved the page as HTML and am able to successfully reproduce it via chrome for devices (from developer tools), by switching over various devices.
The designer who helped create these templates are not accessible anymore, so I am not able to get any further help. I suspect it to be a CSS issue. The website uses twitter-bootstrap.
Screenshots:
Normal Browser & Iphone redering comparison:
(the div in question is marked by the arrow)
I have looked into the view source and the div in question appears on both versions in the HTML source:
<div class="button-holders button-overlay" id="button_holder">
<div class="col-sm-3 col-xs-3 noway" id="noway" style="display: block;">
<a id="noway1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/button.png" width="70" height="70"></a>
<a id="noway1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('1', '0')"> NO WAY</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 nah" id="nah" style="display: block;">
<a id="nah1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/nah.png" width="70" height="70"></a>
<a id="nah1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('2', '0')"> NAH</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 sure" id="sure" style="display: block;">
<a id="sure1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/sure.png" width="70" height="70"></a>
<a id="sure1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('3', '0')"> SURE</a>
</div><!--noway-->
<div class="col-sm-3 col-xs-3 ohyeh" id="ohyeh" style="display: block;">
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;"> <img src="./Coupon Crank_files/heart.png"></a>
<a id="ohyeh1" style="cursor:pointer;text-decoration: none;" onclick="rotate_crank_coupon_load('4', '0')"> OH YES</a>
</div><!--noway-->
<div class="report_abouse_style" id="report_abouse" style="display: block;">
<a class="badge badge_edit" id="report_abouse1" style="cursor:pointer;text-decoration: none;"> Report Abuse</a>
</div>
Could it be something that can be fixed via modifying the CSS?
I am attaching the html files to reproduce the issue locally: http://filenurse.com/download/c5d96491585893ee917842a6f11f8166.html
Any help in the right direction would be greatly appreciated.
Thanks in advance,
AD
Lately me and my QA buddies are trying to find a way to make Selenium IDE (v2.2 with FireFox v22) type a text into NicEdit's textarea, but without success.
We took a look on the internet for the past few days, and so far we discovered, among other things, that NiceEdit is not an iFrame (I think many here already know that).
We're not using code nor any other webdrive, just Selenium IDE, which makes things a bit harder, I guess.
We've tried xpath, class, id etc... no success.
But in these cases, the Find button in Selenium highlights the area.
So, is there a way to make Selenium IDE type in the NiceEdit's textarea without code?
Here's the html code of NicEdit's textarea provided by FireBug.
<div contenteditable="true" class="span12 " data-bind="html: Conteudo" id="conteudo" style="background-color: rgb(255, 255, 255);">
</div>
And the rest before it:
<div id="editorPanel" style="width: 100%;" unselectable="on">
<div class=" nicEdit-panelContain" style="overflow: hidden; width: 100%; border: 1px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239);" unselectable="on">
<div class=" nicEdit-panel" style="margin: 0px 2px 2px; overflow: hidden;" unselectable="on">
</div>
</div>
<div id="conteudo" class="span12" contenteditable="true" data-bind="html: Conteudo">
</div>
EDIT: I've found out that NicEdit turns the textarea into a div, so Selenium is not able to focus on the area.
Anyone has any sugestions about how can I make Selenium put some text on NicEdit?
Thanks!
<tr>
<td>storeEval</td>
<td>this.browserbot.findElement("id=someID").innerHTML='fillerText'</td>
<td></td>
</tr>
Does the above work for you?