CODEWITHSUNDEEP
phphtmlcssmpdfhtml-to-pdf
Hema D.
Hema D.

Reputation: 138

A problem with rendering CSS on mPDF - PHP

Okay.

The Problem is kinda weird.

I'm trying to convert HTML page to PDF file and save it.

I'm using mPDF for this. However, CSS rendering isn't going as expected.

I'm not using CSS3. So, I don't think that this is the problem.

Here's a screen shot of how should it be :

enter image description here

PDF :

Goes really wrong

Thanks in advance.

HTML : https://codepen.io/AKhaled47/pen/omRObM

CSS :

div.calendar{
  margin:2pc auto;
  padding:0px;
  width:602px;
}
div.calendar div.box{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:40px;
    background-color:#890e4f;    
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;  
}
div.calendar div.header{
    line-height:40px;  
    vertical-align:middle;
    position:absolute;
    left:11px;
    top:0px;
    width:582px;
    height:40px;   
    text-align:center;
}
div.calendar div.header a.prev,div.calendar div.header a.next{ 
    position:absolute;
    top:0px;   
    height: 17px;
    display:block;
    cursor:pointer;
    text-decoration:none;
    color:#FFF;
}
div.calendar div.header span.title{
    color:#FFF;
    font-size:18px;
}
div.calendar div.header a.prev{
    left:0px;
}
div.calendar div.header a.next{
    right:0px;
}
div.calendar div.box-content{
    background: #FFF;
    border:1px solid #890e4f;
    border-top:none;
    border-radius:5px;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
div.calendar ul.label{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-top:5px;
    margin-left: 5px;
}
div.calendar ul.label li{
    margin:0px;
    padding:0px;
    margin-right:5px;  
    float:left;
    list-style-type:none;
    width:80px;
    height:40px;
    line-height:40px;
    vertical-align:middle;
    text-align:center;
    color:#000;
    font-size: 15px;
    background-color: transparent;
}
div.calendar ul.dates{
    float:left;
    margin: 0px;
    padding: 0px;
    margin-left: 5px;
    margin-bottom: 5px;
}
div.calendar ul.dates li{
    margin:0px;
    padding:0px;
    margin-right:5px;
    margin-top: 5px;
    line-height:80px;
    vertical-align:middle;
    float:left;
    list-style-type:none;
    width:80px;
    height:80px;
    font-size:25px;
    background-color: #DDD;
    color:#000;
    text-align:center; 
}
:focus{
    outline:none;
}
div.clear{
    clear:both;
}

Upvotes: 0

Views: 4126

Answers (1)

Finwe
Finwe

Reputation: 6725

Float elements are only partially supported in mPDF. For best results, use a HTML table (which is perfectly suitable for a calendar).

See documentation on floats: https://mpdf.github.io/what-else-can-i-do/floating-blocks.html

Upvotes: 2

Related Questions