I'm pretty new working with MJML, and I'm working on an email project where the visited links are a different color... Thus far, my understanding is that you cannot use pseudo-elements in MJML. Does anyone know a way to do this?
For example, the link is normally blue, but once it's been clicked it becomes gray.
Thank you!!
This seems to work:
<mjml>
<mj-head>
<mj-style>
a.blah:hover {
color: #00ff00!important;
}
</mj-style>
</mj-head>
<mj-body>
<mj-section>
<mj-column>
<mj-text font-size="20px" color="#F45E43" font-family="Verdana" >Hello World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
You don't need the class necessarily (i.e. a:hover, and <a href="#">)
See also their documentation https://mjml.io/documentation/#mjml-style
Related
I've got my setup like this, I'm absolutely squeezing the limits of what is possible from outside a library:
const [customDate, setCustomDate] = useState(moment());
const [focused, setFocused] = useState(false);)
const onDropDownChangeMonth = ()=>{
setCustomDate(moment('07-12-2020', dateFormat.MM_DD_YYYY));
setFocused(true);
}
<SingleDatePicker
date={customDate}
onDateChange={onDateChange}
focused={focused}
placeholder={props.placeholder}
onFocusChange={(e) => {
setFocused(e.focused);
}}
navPrev={<div></div>}
navNext={<div></div>}
keepFocusOnInput={true}
renderMonthText={() => (
<div style={{ display: 'flex', flexDirection: 'row' }}>
<select style={{ border: 'none', background: '#ffffff' }} onChange={onDropDownChangeMonth}>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
)}
/>
so, my current implementation gives me correct result like this:
Since, this would re-render, I wanted to keep it open(I can bear the flicker), the date changes, the calendar changes,the calendar stays open, but, the children they render blank:
Only when I manually defocus, and reopen then the calendar gets rendered, and I see the changes reflected. How do I get the calendar rendered? How to make it so that I don't have to manually defocus it, I don't mind the flicker.
BTW: I'm using the SingleDatePicker by airbnb
Well, this is a possible solution for anyone who doesn't mind a blink instead of a flicker(please read the question above). It's a hacky solution, and it doesn't do much good in my case, just noting here for someone who might be okay with this, or someone who knows how to reduce this blink to a flicker or nothing:
put this in the `onDropDownChangeMonth`:
const onDropDownChangeMonth = ()=>{
setCustomDate(moment('07-12-2020', dateFormat.MM_DD_YYYY));
setFocused(false);
setTimeout(()=>setFocused(true), 1);
}
Even though I put a 1ms timeout, the delay for the re-render is about 1 second, and this is not good in my case.. Please mention anything to reduce or get rid of that delay-for-re-render.
I have text to output into cells, text might be too long, in this case I'd like the overflow to be simply hidden.
The version tested is html2pdf v. 5.2.2 .
I can't find doc about which CSS is recognised and which is not.
Instead I found in /src/Parsing/Css.php code that seems to imply that "overflow" is recognised at least for values "visible" and "hidden":
case 'overflow':
if (!in_array($val, array('visible', 'hidden'))) {
$val = 'visible';
}
$this->value['overflow'] = $val;
break;
So I tried following test case:
<?php
require __DIR__.'/vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
$html = <<<EOT
<body>
<style>
.red {
color:red;
width:30px;max-width:30px;
overflow:hidden;
}
.blue {
color:blue;
}
</style>
<table>
<tr>
<td class="red" >totototototototototototototototo</td>
<td class="blue">titi</td>
</tr>
</table>
</body>
</html>
EOT;
$toPdf=false;
if($toPdf) {
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
}
else { echo $html; }
I'd like the expected output, as rendered in an html browser.
But html2pdf's output simply ignores the css overflow directive (see captures).
Is there something I'm doing wrong?
Is there a way at all?
I'd like a CSS solution/turnaround if possible, no solution based on a substring truncation (because such solutions will have disastrous results with strings like "WWWMMWMWWM" vs "iiilliilli" for instance, 10 characters each, quite a different width).
I'd be grateful to any solution or any hint towards a solution.
Thanks in advance.
Here under the html output in a browser, and the PDF output made by html2pdf.
overflow:hidden finally seems to work with DIV elements.
But neither display:inline-blocknor float:left do, which would allow side by side DIVs...
A few more tests, and I found my turnaround: a DIV with overflow:hidden in each TD...
What I want to achive
I am using gatsby and want to design an image gallery. Clicking on one of the images shall open a modal, which: (1) is showing the image in maximum possible size, so that it still fits into the screen and (2) is centered in the screen.
My Code
/* imagemodal.js */
import React from 'react'
import * as ImagemodalStyles from './imagemodal.module.css'
import { Modal } from 'react-bootstrap'
import Img from 'gatsby-image'
import { useStaticQuery, graphql } from 'gatsby'
export default function Imagemodal() {
const data = useStaticQuery(graphql`
query {
file(relativePath: { eq: "images/mytestimage.jpg" }) {
childImageSharp {
fluid(maxWidth: 1200) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return (
<div>
<Modal
show={true}
centered
className={ImagemodalStyles.imageModal}
dialogClassName={ImagemodalStyles.imageModalDialog}
onHide={(e) => console.log(e)}
>
<Modal.Header closeButton />
<Modal.Body className={ImagemodalStyles.imageModalBody}>
<h1>TestInhalt</h1>
<Img fluid={data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
}
/* imagemodal.module.scss */
.imageModalDialog {
display: inline-block;
width: auto;
}
.imageModal {
text-align: center;
}
.imageModalBody img {
max-height: calc(100vh - 225px);
}
The Problem
The image does not scale to the screen size. The image is either too big - so it flows over the vieport - or it is too small. Secondly, the modal size does not respond to the image size correctly and / or is not centered.
What I tried
I used this suggestion for the CSS: How to limit the height of the modal?
I tried as well dozens of other CSS parameter combinations. But I could not find a working solution.
I tried to format the gatsby-image directly with a style-tag.
I tried as well react-modal but had similar problems.
Does anyone have a good solution to show a gatsby-image in full screen size in a responsive modal? For me it is okay to use either the bootstrap-modal or react-modal - or any other suitable solution.
Edit
In the end I ended up with a workaround. I used react-image-lightbox and took the Image-Source from gatsby-image as the input for lightbox. My component gets the data from the graphQL query in the props via props.imageData.
This works quite well for me:
import Lightbox from 'react-image-lightbox';
...
export default function Imagegallery(props) {
...
const allImages = props.imageData.edges
const [indexImageToShow, setIndexImageToShow] = useState()
...
return(
<Lightbox
mainSrc={allImages[indexImageToShow].node.childrenImageSharp[0].fluid.src}
...
/>
Special thanks to #FerranBuireu to point me to the right direction
Assuming that the functionality works as expected, as it seems, it's a matter of CSS rules, not React/Gatsby issue. The following rule:
.imageModalBody img {
max-height: calc(100vh - 225px);
}
It Will never be applied properly, since gatsby-image creates an output of HTML structure of nested <div>, <picture> and <img> so your rule will be affected by the inherited and relativity of the HTML structure. In other words, you are not pointing to the image itself with that rule because of the result HTML structure.
You should point to the <Img>, which indeed, it's a wrapper, not an <img>.
return (
<div>
<Modal show={true} onHide={handleClose} centered className={ImagemodalStyles.imageModal} dialogClassName={ImagemodalStyles.imageModalDialog}>
<Modal.Header closeButton />
<Modal.Body>
<Img className={ImagemodalStyles.imageModalBody} fluid={props.data.file.childImageSharp.fluid} />
</Modal.Body>
</Modal>
</div>
)
The snippet above will add the (spot the difference, without img):
.imageModalBody {
max-height: calc(100vh - 225px);
}
To the wrapper, which may or may not fix the issue, but at least will apply the rule correctly. It's difficult to know what's wrong without a CodeSandbox but you will apply the styles correctly with this workaround.
Keep always in mind that when using gatsby-image, the <img> it's profound in the resultant HTML structure so your styles should apply to the outer wrapper of it.
I use the ion-slide directive documented here and I cannot find a method to hide the pager. I tried setting the pager attribute as in:
<ion-slides options="myOptions" pager="false" slider="mySlide[item.id]">
however that does not work, the pager bullets are still showing.
Is it possible to hide the ion-slides pager, and if so - how?
official solution:
options="{pagination: false}"
Just add this in your css:
.swiper-pagination-bullet{
background:white!important;
border-radius: 100%;
height: 17px;
width: 17px;
display: none;
}
Hope this helps
Just remove pager.
Example:
<ion-slides pager loop autoplay="1500" class="auto_height"> ...
just put (without "pager"):
<ion-slides loop autoplay="1500" class="auto_height"> ...
If these slides are being added to an ion-slide-box, you can:
show-pager="false"
on the ion-slide-box. See the docs for more info.
You might also be able to hide them via css like:
.slider-pager { display:none; }
i'm searching a solution for this question. I'm workig on this since 2 days.. But nothing. Do you resolve this problem? I added .slider-pager { display:none; } but the dots still remain!
May be you can do like this;
paginationType: 'custom',
paginationBulletRender: function (index, className) {
return '';
}
This is better than pagination:false
I'm looking for a infinite scroll script, but can't find one which really fits my needs. I have found one which would be great, but the problem is that the script works after the User scrolls down using the browser SCROLLBAR. Instead it should load and display more data depending on the div "scroll" position.
How can i do that? It doesn't have to be this script but it should include a mysql query function so I can implement mine easily, because I'm really a newbie in Javascript, jQuery etc. A tutorial would do it also...but can't really find one. All of them are depending on the browser's scroll position.
That's the script I'm using:
github.com/moemoe89/infinite-scroll/blob/master/index.php
I made only one modification:
news_area{ width:400px; height:95px; overflow:auto;}
Thanks in advance!
Instead of $(window).scrollTop() use any container that you would want to get it's scrolling position from, like $('.scrollable').scrollTop().
$('.scrollable').on('scroll', function(){
var $el = $(this);
$('.scrolled').text($(this).scrollTop());
if( $el.innerHeight()+$el.scrollTop() >= this.scrollHeight-5 ){
var d = new Date();
$el.append('more text added on '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()+'<br>');
}
});
div {
height: 50px;
border: 1px solid gray;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scrolled from top: <span class="scrolled">0</span></p>
<div class="scrollable">
text<br>
text<br>
text<br>
text<br>
text<br>
text<br>
</div>