A problem with rendering CSS on mPDF - PHP

Question

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 :

PDF :

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;
}

I'm not very familiar with CSS. But one thing I recognized in your code: are you using deliberately the unit 'pc' (Pica) instead of 'px'(magic css unit) in your first css element? If it is deliberateness, let's have a look at your html code... Are you using any kind of loop to generate your html? — Thorsten Sauer
– Thorsten Sauer, Commented Feb 20, 2019 at 8:55
1- Changing pc to px doesn't make any difference. 2- No, I don't. I just used for loops and foreach in calendar class. that's it. — Hema D.
– Hema D., Commented Feb 20, 2019 at 18:40

Finwe · Accepted Answer · 2019-02-21 10:32:44Z

2

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

answered Feb 21, 2019 at 10:32

Finwe

6,7933 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Hema D. Over a year ago

Okay, let me try. Although changing the HTML would be a big deal for this. But some efforts would be better

Hema D. Over a year ago

Unfortunately, Goes worse.

Hema D. Over a year ago

Checked my HTML 4 times for any non closed tags, etc. It's displaying normal on my web page. But not in the pdf.

Finwe Over a year ago

Not helpful. Update your question with actual HTML code. Just append it, do not rewrite it for the sake of history.

Finwe Over a year ago

idownvotedbecau.se/imageofcode - No one will ever reproduce your problem from an image of PHP code. Also see MCVE.

|

Collectives™ on Stack Overflow

A problem with rendering CSS on mPDF - PHP

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related