When exporting data to PDF with DomPDF in Laravel, the second column appears elongated

I am utilizing DomPDF within a Laravel project. While it prints correctly, the second column image is being stretched. My goal is for both columns to evenly occupy half of the available space. I will now provide my code below.

CSS Files:

header {
    position: fixed;
    top: 5px;
    border: 3px solid gray;
    left: 0px;
    right: 0px;
    background-color: lightblue;
    height: 30px;
    text-align: center;
    color: #656262;
}

table {
    width: 100%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 100%;
    height: 570px;
    margin-top: 90px;
    /* margin-left: 90px; */
    text-align: center;
    font-family: arial;
    margin-right: 15px;
    border: 3px solid rgb(12, 12, 12);
    position: relative;
}

.image {
    width: 100%;
    max-height: 400px;
}

.price {
    color: grey;
    font-size: 22px;
}

.second {
    page-break-after: always;
}

.page {
    height: 100%;
    width: 100%;
    margin-right: 10px;
}

body {
    background-color: #f2f2f2;
}

.name {
    width: 82%;
    position: absolute;
    bottom: 100px;
    font-size: 25px;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: #2690ed;
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
    font-weight: bolder;
    right: 50px;
    left: 15px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
}

.price {
    display: block;
    float: left;
    margin-left: 10px;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Ariel;
    color: #ffffff;
    font-size: 20px;
    background: rgb(230, 83, 83);
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
    position: absolute;
    bottom: 25px;
    right: 8px;
}

.quantity {
    margin-left: auto;
    width: 30%;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Ariel;
    color: #ffffff;
    font-size: 20px;
    background: rgb(243, 7, 7);
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
}

.SKU {
    float: right;
    margin-right: 10px;
    background: #60e00a !important;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 20px 5px 20px;
    text-decoration: none;
    position: absolute;
    bottom: 25px;
    left: 8px;
}

.item-number {
    visibility: hidden;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    background: gray;
    padding: 5px 20px 5px 20px;
    border: solid #ebe4e4 2px;
    text-decoration: none;
    font-weight: bolder;
}

This is my blade code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{-- <link href="{{ asset('css/print.css') }}" rel="stylesheet"> --}}
    <link rel="stylesheet" href="{{ public_path('/css/print.css')}}"> 
    <title>Unique Natural LLC</title>
    <style>
    </style>
</head>

<body>
    <header style="display:inline';overflow:inherit ">
        <p style="margin-top:2px;font-size: 25px;font-weight: bold">Unique Natural LLC</p>
    </header>
    <div class="page">
        <table>
            @for ($i = 0; $i < count($products); $i += 2)
                <tbody>
                    <tr>
                        <td>
                            <div class="card">
                                <img class="image"
                                    src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('images/' . $products[$i]->image))) }}">
                                {{-- <p class="quantity"> Out Of stock  </p> --}}
                                <P class="name"gt;{{ $products[$i]->name }}</P>
                                <p class="price"gt;Price : {{ $products[$i]->price }} $</p>
                                <p class="SKU"gt; SKU : {{ $products[$i]->SKU }} </p>
                            </div>
                        </td>
                        <td>
                            <div class="card second">
                                <img class="image”
                                    src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('images/' . $products[$i + 1]->image))) }}"
                                    alt="Denim Jeans”>
                                <P class="name">{{ $products[$i + 1]->name }}</P>
                                <p class="item-number"> Item Number: : {{ $products[$i + 1]->item_number }}</p>
                                <p class="price”>Price : {{ $products[$i + 1]->price }} $</p>
                                <p class="SKU”>SKU: {{ $products[$i + 1]->SKU }}</p>
                            </div>
                       </td>
                  </tr>
               </tbody>
           @endfor
        </table>
     </div>
</body>
</html>

Lastly, I will provide a screenshot of the output:

https://example.com/screenshot.jpg

htmlcsslaraveldompdf

Answer №1

When placing images in <td> tags within a table, it's important to consider the varying sizes of the images. To address this issue, it is recommended to specify a specific size for the <td> tag.

For instance, if you want equal spacing between two columns, assigning a 50% width to the <td> elements can achieve this:

td {
  width: 50%;
}

If you need to divide the space among more than 2 columns, simply divide 100 by the desired number of columns.

Answer №2

apply a CSS class to td elements.

td {
  width: 50%;
}

An alternative approach for setting the width of td is:

table {
  width: 100%;
  table-layout: fixed;
}

This option may also be effective. The code was slightly difficult to decipher, but I believe these solutions will do the trick.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to extract the value of radio buttons for easy manipulation purposes

Update: Success! I finally got it to work. Here is my example code. Hopefully, this can assist others with similar needs. I am in need of a shipping radio button for regular and express shipping options. With some guidance from online research and cale_b ...

phpjqueryhtmlajax

Hover over parts of an image to bring attention to them

I am interested in developing a webpage featuring a black and white image of 5 individuals. When hovering over each person, I would like them to illuminate and display relevant information in a dialog box next to them. Do you have any tips on how I can ac ...

javascriptjquerycss

What causes the checkbox toggle to require two clicks instead of one?

Currently in the process of creating a checkbox along with an attached label. The for attribute is used to connect the click for the checkbox. There is also a jQuery function that triggers a slide toggle for a text input field on clicking the checkbox and ...

jqueryhtmlcheckbox

The br tag in HTML cannot be utilized in conjunction with JavaScript

I am currently working on a project involving HTML and JavaScript. I have a "textarea" where data is inserted into the database upon pressing the "Enter key." However, I am encountering two issues: Currently unable to save data like "Lorem Ipsum" (the ...

javascripthtmljquery

The dropdown menu disappears when I hover over the tab, making it impossible for me to navigate it in the react app

My navigation component includes a Games tab with a dropdown menu that appears when you hover over it. However, I'm facing an issue where the dropdown menu closes before the user can transition from hovering over the games tab to the actual dropdown m ...

javascriptcssreactjshover

I am having trouble getting the backface-visibility selector to function properly

Currently working on a homepage design that features a hover-responsive menu. Despite my efforts, the backface-visibility property doesn't seem to be cooperating. I'm attempting to rotate the circle and reveal the backside upon hover. I feel like ...

css3dcss-animations

Tips for placing multiple images onto one canvas

I am currently working on a web application that allows users to create sketches, define their positions and sizes, and then save them to a database. In another section of the website, I aim to retrieve these images and display them on a single canvas. To ...

javascripthtmlimagecanvasdraw

Fixing issues in PHP File Editor

At our web development company, we have created an online file editor and file manager script for our website users to easily manage their files and customize their templates. This script is written in PHP and allows users to edit html, text, php, js, jque ...

phphtml

Difficult exam question that is challenging me

Struggling with a mock exam assignment here - trying to create a conversion program from wind speed in meters per second to watts per hour. I've set up a chart with different ranges of m/s to watts, but for some reason, it's not working as expect ...

javascripthtmlcss

Achieve perfect alignment of Bootstrap checkboxes

Is there a way to vertically align checkboxes in a column with their labels? My goal is to have these elements centered on the page, but I want the checkboxes themselves to be aligned vertically. <div class="row"> <div class="span12 paginatio ...

htmlcsstwitter-bootstrapcheckboxvertical-alignment

What is the best way to create a border for the active class nav-item in Bootstrap 4?

I am facing an issue with changing styles in the nav-item. I have created a separate style sheet and added the necessary code to make the changes. Surprisingly, the changes are reflecting well in Internet Explorer but not in Firefox. Can anyone guide me on ...

cssbootstrap-4

Obtaining a data array from a JSON response without including the header in Laravel

Hey there, I've recently created a small Laravel getter that looks like this. public function getYearListAttribute(){ $currentYear = intval($this->created_at->format('Y')); $yearArray[] = array( 'present' => ...

jsonlaravel

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

javascripthtmlcss

Is it risky to turn off CSRF protection for Ajax calls?

I've been dealing with some issues related to CSRF and ajax requests in Laravel 5. Currently, I am including the X-CSRF token in the header of every ajax call, following the guidelines mentioned here: http://laravel.com/docs/master/routing#csrf-x-csr ...

phpajaxlaravellaravel-5csrf

"HTML and JavaScript: The search functionality fails when trying to search for a string that is sourced from an array

Could someone assist me with a comparison issue I'm encountering? I am trying to use the includes() method to compare a list in a table with a list of names stored in a string. Strangely, when I hardcode the string directly into the includes() method, ...

javascripthtmlstringsearch

Floating elements can be vertically aligned with spans

I am facing an issue with aligning three spans vertically inside a div. It seems simple to achieve, but vertical alignment is not working properly when I use float. My goal is to have the light blue bar vertically centered. Here is the code snippet: .co ...

htmlcsspositionalignmentvertical-alignment

AngularJS allows you to toggle the visibility of a div at set intervals, creating

I am struggling with the task of showing and hiding a div that serves as an alert for my application. Currently, I am using $interval to create a continuous show and hide action on the div. However, what I aim for is to have the DIV visible for X amount o ...

javascriptjqueryhtmlangularjs

What is the method for evaluating two variables in Javascript?

In attempting to compare two distinct variables, userInput and commandOne, I aim to trigger specific code upon a match between them. The initial step involves pressing a button to activate myTest(). function myTest() { userInput = document.getElementB ...

javascripthtml

The content of the SELECT tag cannot be generated using Ajax and HTML

I am working with the following snippet of HTML code: <select id="c0" name="countries" onchange="show_other()"> <option value="1">something</option> <div id="c1"> </div> </select> Within this code, I have the i ...

htmlajax

Is it possible to embed a link within the double brackets using AngularJS?

If I have the following code in my HTML: {{text}} Now, let's say that "text" represents an address. Is there a way to make the displayed value of text clickable without directly modifying the HTML file? In other words, can we create a link effect us ...

javascripthtmlangularjs