I am using this excellent package: https://github.com/barryvdh/laravel-dompdf
To download a view to a customers computer.
$pdf = PDF::loadView('doc_generation.mot', ['car' => $car]);
return $pdf->download($vrm .' MS.pdf');
Everything works fine, but no html entities are being shown on the pdf. Have tried the tick itself, and ✔ but both don't show.
I also have a div:
.number-plate {
background: #FFD307;
padding: 16px;
border: 1px solid #999;
font-size: 36px;
font-weight: 700;
border-radius: 5px;
}
Where the padding isn't shown on the output PDF. Although padding used elsewhere on other selectors is fine.
Anyone know how to fix these issues?
Related
I'm using CKEditor 5 in Angular 7, Classic build.
All working fine except that the p tags in the content edit area have this css applied:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Which results in a big vertical margin between paragraphs in the content edit area.
I've been going through the documentation but haven't found a clear answer as to how I can remove or override this css. In previous versions of CKEditor the css file was easily accessible and overridden, but in version 5 not so - it seems I may have to do a custom build, which I'm hoping to avoid.
Before I go down that route - has anyone else come across this? Any other solutions or recommendations?
Thanks in advance :)
You should use :host ::ng-deep to override it with css.
Example:
:host ::ng-deep .text {
p {
margin-bottom: 20px;
}
h2 {
margin-top: 40px;
margin-bottom: 10px;
}
h3 {
margin-top: 25px;
margin-bottom: 5px;
}
h4 {
margin-top: 20px;
margin-bottom: 5px;
}
}
<ckeditor class="text" [editor]="textEditor" [config]="config"></ckeditor>
I'm using CKEditor 4 and I don't know if the source tab is still available in that version. If so, you have to edit ypur ck.config file and add CKEDITOR.config.allowedContent = true. After that, you can now paste a style in the source tab
I've been working on a theme for the site http://silversoundz.com and have it looking just how my client wants it on browsers but the problem comes when I shrink the screen to check the site on mobiles, in particular the Iphone.
It seems like there's a minimum threshold (around 768px width) before the header+icon svg files go back to their enormous default dimensions thus rendering everything else tiny in relation to that. I've changed the icons to smaller pngs but I'm not sure what the best course of action is for resolving the header scaling/sizing so everything is proportional on a small screen.
Here's the problematic css
media="all"
#media only screen and (min-width: 768px)
.logo-img {
width: 100%;
float: left;
margin: 0;
position: inherit;
}
Ok I figured it out:
Basically I just had to find the relevant bit of css which was only kicking in for screens > 768 and re-paste it below the general styles which says:
body {
font-family: "Open Sans", sans-serif;
font-size: 1.0em;
color: #000000;
background: #ffffff;
font-weight: 400;
min-height: 100%;
}
.wrap {
width: 96%;
margin: 0 auto;
}
so it would come into affect for the general styles too.
I am using Joomla Membership Pro component and am having some trouble with CSS styling.
If you click here
http://se24media.net/dc3/index.php/join-us/membership-options/supporter/sign-up
You will see the background is styled nicely but if you fill in the form, click submit and go through to the page which dispalys your membership details it loses all styling (see link below)
http://i60.tinypic.com/33pa4c2.png
Does anyone know why it suddenly loses it's formatting?
Many thanks
It loses the styling because on the first page, the table containing all the fields is wrapped with <form> tags like so:
<form id="os_form">
<!-- Table with fields are in here -->
</form>
and the following CSS has been given for #os_form
#os_form {
background-color: #FFFFFF;
background-image: url("/dc3/images/news_header.gif");
background-repeat: repeat-x;
border-color: #868687;
border-radius: 12px;
border-style: solid;
border-width: 0 2px 3px 0;
color: #000000;
float: left;
font-family: 'Source Code Pro',sans-serif;
height: auto;
margin: 0 40px 40px 50px;
max-width: 100%;
opacity: 0.9;
padding: 40px 20px 20px;
width: 85%;
}
The second page simply displays a table with the class os_table so style this table, you will need to add the following to your CSS file:
.os_table {
/* code here */
}
Hope this helps
I am making a banner where people can upload an image.
Before the upload it you see the image. With just a standard html code
<div id="box"><img src="blah blah" /></div>
The CSS:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
The image will fit in the div id="box" succesfull. If you can see i use border-top-left-radius and right-radius: That works perfect in firefox and Chrome. But in safari it doesnt work.
Example:
This is Chrome and Firefox. You can see the image will fit with the screen and got a nice border-radius on the top.
This is Safari. You see that the image dont have a border-radius on the top. I dont know the problem.
For that i also tried to use:
-webkit-
But that also didnt work. Anybody know how to fix that for safari?
please Update Below css and Check .....And make necessary changes as per your requirmnet..
hope this will solve your problem
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border: 1px solid #D9D9D9;
}
Please Mark answer if your problem is solved...
This is all you need:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-radius: 7px 7px 0 0;
}
Keep it simple. :-)
Im struggling with this for the past 3 months!! - how to adapt css3 to IE7,8 and 9??
this is my page
I am using buttons there, I want to make rounded corners (basic, no?)
so I have used this css
body .main_title {
font-size: 16px;
padding: 0.3em 1.5em;
display: inline-block;
cursor: pointer;
line-height: 1.5;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: #222222;
color: white;
behavior: url(PIE.htc);
}
and the button is
<button type="submit" id="1" class="main_title">מאפיינים</button>
as you noticed, I also used an "extention" called css3pie to make it work but nothing!!
any suggestion?
any suggestion?
Sit back. Relax. Don't worry about minor cosmetic details in old browsers with falling marketshare.
CSS3 pie is kind of buggy. Try putting a position:relative; on it. Also make sure that's the correct path to PIE.htc — if I remember correctly, it may help to link to it absolutely.
I think you can probably use jquery for this http://jquery.malsup.com/corner/ in your javascript.
Anything from IE9 onwards will be ok with this in the css
border-radius:10px
http://caniuse.com/#search=border-radius