Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bad conversion to pdf #728

Open
SystemError7 opened this issue Oct 18, 2023 · 3 comments
Open

Bad conversion to pdf #728

SystemError7 opened this issue Oct 18, 2023 · 3 comments

Comments

@SystemError7
Copy link

I was testing with simple html structure, and I thought it was problem of the padding or margin of the html, but I removed from the css and still convert the same.
I'm attaching images and the source code of the html, in order to help me or to resolve this problem.
Thanks in advance:
image
image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f2f2f2;
        margin: 0;
        padding: 20px;
      }

      .container {
        max-width: 210mm;
        height: 297mm;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        padding: 20px;
      }

      .container h2 {
        text-align: center;
      }

      .form-group label {
        display: block;
        font-weight: bold;
      }

      .form-group p {
        margin: 0;
      }

      .form-group hr {
        border: none;
        border-top: 1px solid #ccc;
        margin: 10px 0;
      }

      .form-group .sub-label {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Medical Examination Form</h2>
      <div class="form-group">
        <label>Personal Information:</label>
        <p><span class="sub-label">Name:</span> John Doe</p>
        <p><span class="sub-label">Date of Birth:</span> March 12, 1980</p>
        <p><span class="sub-label">Gender:</span> Male</p>
        <hr />
      </div>
      <div class="form-group">
        <label>Medical History:</label>
        <p>
          <span class="sub-label">Chronic Conditions:</span> Type 2 Diabetes
        </p>
        <p><span class="sub-label">Allergies:</span> None</p>
        <p><span class="sub-label">Current Medications:</span> Metformin</p>
        <hr />
      </div>
      <div class="form-group">
        <label>Examinations:</label>
        <p><span class="sub-label">Blood Pressure:</span> 120/80 mmHg</p>
        <p><span class="sub-label">Heart Rate:</span> 72 beats per minute</p>
        <p><span class="sub-label">Body Temperature:</span> 37.0 ºC</p>
        <hr />
      </div>
      <div class="form-group">
        <label>Recommendations:</label>
        <p>
          <span class="sub-label">Diet:</span> Follow a low-carbohydrate diet
        </p>
        <p>
          <span class="sub-label">Exercise:</span> Walk at least 30 minutes a
          day
        </p>
      </div>
    </div>
  </body>
</html>
@DmytroLitvinov
Copy link

Having the same issue with <p> element.

@jovana
Copy link

jovana commented Jan 27, 2024

Same issue, try to solve this by CSS, but it seems not a css issue.

@JanEgner
Copy link
Contributor

It's actually the padding: - if you remove that property from both body and .container CSS entries, the linesof the document are no longer spread out to fill the whole page. I am certain this side-effect of defining a padding is unintended.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jovana @DmytroLitvinov @JanEgner @SystemError7