I have a Django view that renders a piece of text and word wraps it. I am using the below CSS. When I convert the same to PDF using PISA, I dont see the word wrap and text is lost.
Do I need to set any properties on PISA for this?
{
margin-left: 20px;
padding: 0;
font-size: 12;
font-family: "Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: #333;
word-wrap: break-word;
}
Keep in mind that Pisa does not use CSS itself, it just implemented some of the CSS syntax and properties to apply its own rules in PDF generation.
See the section 6, Cascading Style Sheets, of the manual for the supported properties. And take a look at this nice manual, that is a little bit more detailed.
It's hard to find good documentation about pisa.
Related
I'm using .mjml templates and VSCode. I had to install an extension for the highlighting to work correctly but I noticed by Prettier seems to transform inline CSS (which is pretty common in emails) from this:
p,
h1 {
color: #ffffff;
}
h1,
.text-h1 h1 {
font-size: 32px;
line-height: 1.1;
margin: 0 0 16px 0;
font-weight: 700;
}
to this:
p, h1 { color: #ffffff; } h1, .text-h1 h1 { font-size: 32px; line-height: 1.1; margin: 0 0 16px 0; font-weight: 700; }
The only way I was able to prevent this is by adding a <!-- prettier-ignore --> before the <mj-style> tag but I was wondering if there isn't a better way (configuration?) to get the same result without the extra markup.
See:
https://github.com/mjmlio/mjml/issues/2557
Is there a way to tell Prettier that the following "block" has a specific markup type?
Based on my research and also the lack of answers, it looks like the overall MJML tooling ecosystem is not in the best of states. I think for now the best option is to use the workaround I provided. Here is a detailed breakdown of the options available.
Style element <mj-style>: (most likely the best option)
<!-- prettier-ignore -->
<mj-style css-inline="inline" />
.content {
color: green !important;
}
</mj-style>
Pros:
Works in the online visual editor by copy/pasting the markup.
Cons:
No Prettier formatting (ref).
An external CSS file:
<mj-include path="./default.css" type="css" css-inline="inline" />
Pros:
You can import a CSS file that will get normal Prettier treatment.
Standard pattern where CSS lives outside the document.
Cons:
It also won't work with the online MJML editor tool without merging back your CSS file. This is very annoying and makes it hard to maintain.
<mj-include> can report miss flagged error depending on our your project is setup.
It does not work with the "official" VSCode plugin (you have to use this one).
MJML inline styles:
<mj-text color="#fff" padding="0" font-weight="400" font-size="16px" line-height="1.65" />
Pros:
You don't need CSS.
Cons:
You possibly will repeat a lot of the same style and maintenance can become problematic.
Style element <mj-class>:
<mj-class name="blue" color="blue" />
Pros:
Benefits from the re-usability of CSS without having to use CSS, avoiding Prettier issues.
Cons:
Not as flexible as CSS in terms of selectors which can lead to repetition and maintenance issues.
I would like to set my ion-select with 100% of width.
I have tried with css class like this:
.mySelect { width: 100% !important; }
But it is not working.
I did it.
For someone who wants the solution, here is the code:
.myCustomSelect{
max-width: 100% !important;
}
You must have to override the 'max-width' css property.
Increasing the specificity of the selector allows for doing it without the !important on it:
ion-select.myCustomSelect{
width: 100%;
max-width: 100%;
}
Which makes it a bit cleaner, since !important should be used as sparingly as possible, as noted in the Stack Overflow article here:
Should I avoid using !important in CSS?
You don't need !important at all! Ionic has specified a min-width of 45% (or whatever as per your version of ionic). All you have to do is over-ride it with a max-width of 100%. At the same time, the select, being an inline element, will only expand to fit its contents. So it won't fill the whole width. So to make this happen, you simply add width: 100% to it. So your final CSS class may look something like this:
.full-width-select {
width: 100%;
max-width: 100%;
}
I try the each solutions but found a perfect way to do this :)
just modify your sass file by adding this
ion-select{
max-width: 70% !important;// your choice :)
}
The answer from Luis Antonio Pestana is good if you associate it with the code of his initial question. So to be more clear, the complete code to get the ion-select to take 100% of its container is :
.your_ion_select {
max-width: 100% !important;
width: 100% !important;
}
This is what helped me. After perusing multiple articles, I've found in this stack overflow article ~ Styling ion-select with popover interface, that if you open the developer tools and use the inspect tool, you can see the class that directly affects the select option.
So now that we know that the classes are .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md we can then add adjust this in our global.scss file
Like so
:root{
.alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md{
max-width: 100% !important;
width: 100% !important;
}
I'm currently working with Ionicv4 and above, however I'm assuming this should still be of assistance
I have big css file and need regex(Notepad++) to get only elements and css selectors found by specific css value. In following example I need to get element and selector by value 123456
header #objectnav nav a {
border-right: solid 1px #c0c0c0;
border-left: solid 1px #f4f9ff;
color: #123456;
}
a:hover {
color: #654321;
}
#hints .hint {
background-color: #f4f9ff;
border: 1px solid #e0f0ff;
color: #123456;
margin: 0 0 30px 0;
position: relative;
}
on exit I expect following
header #objectnav nav a
color
#hints .hint
color
or, if possible
header #objectnav nav a^color
#hints .hint^color
I did this just for the challenge:
The following regex will find all the rules containing the text 123456 as a value:
[^{}\s][^{}]*\{[^}]*?[-\w]+\s*:[^;}]*?123456[^}]*\}
But that's just a basic regex. The more challenging part is that I wondered if it's possible to generate a report such as the one you asked for using nothing but Notepad++. It turns out it's possible.
Replace the following pattern:
\s*([^{}]+?)\s*\{[^}]*?(?(?=([-\w]+)\s*:[^;}]*?123456)[^}]*|[^}])*\}\s*
With the following replacement string:
(?2$1^$2:)
Or this one depending on the output you prefer:
(?2$1\r\n$2\r\n\r\n:)
I didn't test it extensively but it works for the test cases you provided.
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
I want to create a MediaWiki template which shows different text depending on where it is on a page.
Specifically, it is before the first heading it should show text like, "this template is applicable to this whole page"
Alternatively, if it is within a section on a page (after a heading) it should show text like, "this template is specifically applicable to this section".
I know there are templates that make use of "If" (like If pagename); is there any way of detecting the template's location on the page?
I don't think so. Your best bet would be to make multiple templates. That being said I'm sure you could write an extension that would do this.
Another way would be to add a variable in your template, that you change depending on which section it is in.
With a lot of help from a colleague the answer is below. Put this into a template (which you then call from all your other templates containing header / instruction / etc. text).
<includeonly><css>
div.headingText { color: blue; border: 2px solid blue; background: lightcyan; width: 461px; padding:0.5em 0.5em 0.5em 0.5em; display: none; margin-bottom:-6px; }
h2 + div.headingText, h3 + div.headingText, h4 + div.headingText, h5 + div.headingText, h6 + div.headingText { display:block; margin-top:5px; }
</css>
<div class="headingText">'''{{{1|This [[tag]] applies only to this section.}}}'''</div></includeonly><noinclude>
your explanatory text
</noinclude>
Notes:
This requires use of the CSS extension.
What this actually does is show certain text if the tag is included directly below a title and no text otherwise. (It has default text in parameter 1 in this example, which can be changed.)