I am using DomPDF to export the given String to PDF. I am trying to style my own checkboxes and Align it next to the Label. Sadly the Label is behind the checkbox and I tried many things to fix it but I came not to a good solution.
I know that some posts from SO is adressing these issues. The problem is not that it does not work on a normal website but on the PDF Export in DomPDF the checkbox behave in another way.
I read and tried many approaches from StackOverflow. I also read the CSS Compatibility from DomPDF and every Element I am using is supported.
I fiddle around with the margin and padding. Either it does not happen anything or the whole section get Moved. So like the Label is behind the Checkbox and get moved with it.
My Laravel Code
public function export_to_pdf()
{
$upperHTML = '<html><head><link rel="stylesheet" href="'.public_path("examplepdf.css").'"></head><body>';
$checkboxEL = '<input type="checkbox" name="favorite_pet" value="Cats"><label>Cats</label><br><input type="checkbox" name="favorite_pet" value="Dogs" id="dogs"><label>Dog</label>';
$underHTML = '</body></html>';
$htmlNested = $upperHTML . $checkboxEL . $underHTML;
$options = new Options();
$options->set(['DOMPDF_ENABLE_CSS_FLOAT' => true]);
$dompdf = new Dompdf($options);
$dompdf->setBaseHost(public_path("examplepdf.css"));
$dompdf->loadHTML($htmlNested);
$dompdf->render();
$dompdf->stream("fa");
}
My CSS Code
.checkbox-list {
list-style: none;
}
input[type="checkbox"] {
display:none;
-webkit-appearance: none;
}
input[type="checkbox"] + label:before {
width: 15px;
height: 15px;
border-radius: 3px;
border: 2px solid #636b6f;
background-color: #fff;
display: block;
content: "";
float: left;
margin-right: 50px;
}
I try to represent my expected and actual result the best way I can that you guys have an clue what I mean.
Expected Result:
[ ] Cats
[ ] Dog
Actual Result:
[ ]ts
[ ]g
Aucun commentaire:
Enregistrer un commentaire