Using mPDF 8.0.x.
I am creating a PDF file with a table. In the rightmost column there is a text (let's call it the "start text") and then (just after the "start text" and still inside that table cell) I have added a span object that needs a different background color, text color, paddings... That span object must be part of the "start text" but with different format.
Following the documentation, I've added the CSS file I need to use:
$css = file_get_contents($_SERVER['DOCUMENT_ROOT'].'/mystyles/mystylefile.css');
$mpdf->WriteHTML($css, \Mpdf\HTMLParserMode::HEADER_CSS);
In my css file:
.mySpan {
background-color:#fdb826;
color: white;
border-radius: 2px;
padding-left: 2px;
padding-right: 3px;
padding-top: 2px;
padding-bottom: 2px;
display: inline-block;
line-height: 100%;
}
Then, I add all the content and inside a table cell, after the "start text", I add:
<span class="mySpan">My text that should have paddings around</span>
The contents of that span only reflect the text and background colors styles, padding and border radius are not being applied (at least this means the css file has been added correctly).
Tried to apply that inline in the same span but the result has been the same:
<span class="mySpan" style="...">My text that should have paddings around</span>
When I use that same span in my web page (before sending it to PDF) it shows exactly what I want.
Is it possible to have a text in the same line than the start text with the styles applied?
What am I doing wrong here?
Thank you very much in advance.
mPDF does not support display: inline-block. Furthermore, all block-element styles are ignored inside tables. You can only try to set the padding of the cell, and offset the text inside the span using non-breakable spaces.
Related
I have created a reusable search component, i am facing two issues on this.
overlapping the search text on the svg icon - enter more text on the input box
entering more text the text-indent not staying - text goes left side when more text is entered
I have added the codesandbox
For the overlapping text on the search icon, I would simply solve it by adding some padding to the input field.
input{
padding-right: 50px;
box-sizing: border-box;
}
For the text-indentation not staying while the input field is active, I'm not sure how to solve it in a clean way. You could add a div with the same background color and width as the indentation, and then just give it an absolute position.
Second Issue Workaround
Instead of using text-indent, we can use padding-left and it will work properly, kindly see this one SO
This might help with keeping the content of the input from overlapping the search icon.
.App {
font-family: sans-serif;
}
.css-btdvqp {
background:#e1e1e1;
border-radius: 2px;
}
.css-btdvqp .css-vrkvd {
width: 85%;
}
So, I have a form.
I want to add a padding to the form fields. So, when people start typing, the text will appear with a nice gap between the sentences and the left border of the field...
I can use padding-left, but then the who field jumps to the left (but it does work for the text).
I am looking for CSS code that allows me to style the input text on its own.
I tried this code, but that won't work either.
input[type=text] {
padding-left: 20px;
}
EDIT: I posted a picture what happens when using padding-left on input[type=text]. It does work but on the right you can see what happens with the field. The field gets wider..
The issue is because padding gets added to the rendered width of a field.
Use the box-sizing property to solve it.
input[type=text] {
padding-left: 20px;
box-sizing: border-box;
}
I'm adding the text Like with jQuery. This gives 20px of width to the elements that contain that text (they have width: auto). If you click the a.gdt-starrating link the text Like changes to Liked which now has 25px (due to the extra letter 'd'). But the elements still having 20px. So the text overflows the elements containing it.
$j(".gdup a.gdt-starrating").text("Like");
$j(".gdup div.gdt-starrating").text("Liked");
$j("a.gdt-starrating").live("click", function() {
$j(".gdup div.gdt-starrating").text("Liked");
});
Here is a live example:
http://www.taiwantalk.org/topic/asdasdasdasdasdgg/
If you click the Like link you will see the issue.
Any suggestions to fix this?
problem is this css rule
.gdt-size-20.gdthumb, .gdt-size-20.gdthumb a, .gdt-size-20.gdthumb div {
width: 20px;
height: 20px;
}
in http://www.taiwantalk.org/wp-content/plugins/gd-star-rating/css/gdsr.css.php
I'm having a strange issue with some #font-face text where there is some strange padding (or at least vertical space) included with the text. It is causing problems because I want to text to be positioned a certain way but can't have it overlapping other things. Here is a picture of what is occurring:
As you can see when the text is selected, the text overlaps some of the navigation bar above it. I have tried adjusting the line height and padding, margins, anything I can think of. Here is the relevant CSS, does anybody have a suggestion as to how I can get the height of the line to be around the height of the actual text.
*{ margin: 0; padding: 0; }
h1#logo { font: 350px/.95 'Bebas Neue'; color: #DDD; text-align: center; margin: 1px 0; }
EDIT: Here is a live example of the problem: http://codezroz.com/stuff/hello.html
never seen the /.95 syntax before, but after a few tests now i belive it works like:
line-height = 0.95 * font-size = 332.5
so i think that's your problem, the font is taller than the line
adding overflow: hidden; on the H1 should be enough
Well, applying overflow: hidden to h1#logo stopped the selection highlight from bleeding into areas that were outside the element.
Also remember that you can use the :selection pseudo-element to change the color of the selected text.
The text on my web page looks fine in Firefox & Safari, but in IE7 certain portions are cut off. It looks like (but it hasn't) it has been placed in a smaller element with overflow: hidden;.
Anyone know how to remedy this?
You need to specify the line height to match the font size...
CSS
h1 {
font-size: 2em;
line-height: 2em; /* or 100% */
}
See also IE7 is clipping my text. How do I adjust its attitude?
I had the same problem for IE9 and spent a lot of time fiddling around with the attributes for "height", "line-height" and "padding". Here's what I came up with:
(a) "height" does not affect what's happening inside the textbox;
(b) "line-height" does affect the display of the text and will cause it to be higher or lower in the text box, but the number is important. In the end the first answer seems to be correct i.e. set "line-height" to the same number as your font size;
(c) "padding" also affects the display of text because it creates the space between the borders of the textbox and the text itself;
(d) "vertical-align" provides a reference point for the text inside the textbox.
So, as an example, I got the text to display in the mid-line of the textbox on my site (with no cut off) and a nice distance from the textbox borders by using the following CSS in relation to the "input=text" area of my CSS style sheet:
line-height: 14px; padding: 6px 2px 6px 2px; vertical-align: middle;
The 14px was the size of the font used in my template (stated elsewhere in the CSS style sheet), the 6px is top and bottom padding respectively and the 2px is the left and right padding respectively. The vertical align attribute places a notional middle line through the text. Obviously you can change any of those numbers to suit your requirements.
BTW, for newbies, use the firefox "firebug" plugin to find the code in your CSS syle sheet that needs changing. Just highlight the text box in question and on the right it will give the name of the CSS style sheet its location and line number where the code appears. You can even use "firebug" to do a live test run which will show you the effect of the changes, but which will not be saved when you close your browser : )
Hope this helps.
Try changing the overflow attribute for the element the text is in.
Overflow: auto;
Or
Overflow: Visible;