How can I fix the issue with border-radius not displaying correctly in tcpdf and how can I ensure the text is shown on

Currently, I am utilizing tcpdf to showcase a circle and text together in a PDF. Despite my attempts with the code below, the border-radius attribute is not functioning as expected:

Upon implementation, I obtained the following result:

https://i.sstatic.net/cHLTR.png

The desired outcome should resemble this image: https://i.sstatic.net/leCxa.png

Here is the snippet of code that I am working with:

$html='<table width="100%" border="0" cellpadding="20px">
            <tr>
            <td><p><div style="width:15px;height:15px;background-color:#58d68d;border-radius:50px;margin-right:05px;"></div> Demo1</p></td>
            <td><p><div style="width:15px;height:15px;background-color:#f5b041;border-radius:50px;margin-right:05px"></div> Demo2</p></td>
            <td><p><div style="width:15px;height:15px;background-color:#e74c3c;border-radius:50px;margin-right:05px"></div> Demo3</p></td>
            </tr>
        </table>';

Answer №1

To achieve the desired effect, simply update border-radius: 50px to border-radius: 50%.

<table width="100%" border="0" cellpadding="20px">
        <tr>
        <td><p><div style="width:15px;height:15px;background-color:#58d68d;border-radius:50%;margin-right:05px;"></div> Demo1</p></td>
        <td><p><div style="width:15px;height:15px;background-color:#f5b041;border-radius:50%;margin-right:05px"></div> Demo2</p></td>
        <td><p><div style="width:15px;height:15px;background-color:#e74c3c;border-radius:50%;margin-right:05px"></div> Demo3</p></td>
        </tr>
    </table>

Answer №2

If my interpretation is correct, you are looking to include the 'Demo' texts in every colored section. To achieve this, consider making the following adjustments:

<table width="100%" border="0" cellpadding="20px">
<tr>
    <td><span style="width:15px;height:15px;background-color:#58d68d;border-radius:50px;margin-right:05px;padding:2em;"> Demo1</span></td>
    <td><span style="width:15px;height:15px;background-color:#f5b041;border-radius:50px;margin-right:05px;padding:2em;">Demo2</span></td>
    <td><span style="width:15px;height:15px;background-color:#e74c3c;border-radius:50px;margin-right:05px;padding:2em;">Demo3</span></td>
</tr>
</table>

Replace <p> and <div> with <span>, then adjust the padding around each text using the padding.

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

Can Puppeteer extract the complete HTML content of a webpage, including any shadow roots?

When using Puppeteer to navigate a webpage, I typically can retrieve the full HTML content as text with this code: let htmlContent = await page.evaluate( () => document.querySelector('body').innerHTML ); However, I am currently faced with ...

In Javascript, swap out a particular colored region in an image with a different image

I've been scouring the internet in search of a solution to my problem, but it seems like I might not be looking in the right places. Imagine this image below, how can I replace the blue area with an image uploaded by the user? I'm struggling to ...

Use JavaScript to load and set a background image for a div

When it comes to loading different images onto an "img" tag by printing their URLs using JavaScript and then letting CSS manipulate the content in the tag, I have a code snippet that does just that. $(window).load(function() { var randomImages = [&apo ...

When using jQuery's .each method, only the final JavaScript object element is added to the divs

I have a unique set of dynamically-created divs, each containing a Title. When a div is clicked, a modal opens (which is cleared upon click), and the Title is displayed again in the modal. My goal is to add the category descriptions into these modals, but ...

Achieving opacity solely on the background within a div class can be accomplished by utilizing CSS properties such

Whenever I adjust the opacity of my main-body div class, it results in all elements within also becoming transparent. Ideally, I would like only the gray background to have opacity. See below for the code snippet: <div class="main1"> content </di ...

Displaying the structure of a MongoDB database using Express and Angular in a tabular format

I am looking to present the data from MongoDB in a table format using HTML along with Node.js, Express.js, and Angular.js. Currently, my approach is as follows: route.js app.get('/superhero', function(req, res) { superhero.superhero_list(r ...

Easy steps to include HTTP authentication headers in Spring Boot

I have been customizing my spring boot authorization server to fit my needs. Upon logging in with a username and password from my custom HTML page, I am aiming to redirect back to the /oauth/token endpoint to retrieve the access token. While this process ...

What is the process for changing the border color of a material selection?

Is it possible to customize the border color of a material select element? I attempted changing the border color using css from: https://i.sstatic.net/mw9jq.png to this: https://i.sstatic.net/8b7w7.png Any suggestions on how to achieve this? Appreciate an ...

Unable to select image inside linked container

I'm attempting to display a dropdown menu when the user clicks on the gear-img div using jQuery. However, because it's wrapped inside an a tag, clicking redirects me to a URL. I also want the entire div to be clickable. Any suggestions for a solu ...

Showcasing the Characteristics of Products in a Table on Prestashop

Dealing with PrestaShop. I have configured attributes for a product and I want to showcase them in a table format similar to this example: The table should display the Paper Size across the top, with each row representing the quantity of paper. In my ad ...

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

Attempting to create a slider utilizing jQuery

I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...

"Enhancing Forms with Multiple Event Listeners for Seamless Sub

I'm working on creating a countdown timer with 3 buttons for controlling the timer: start, cancel, and pause. The timer itself is a text input field where you can enter a positive integer. I need to use core JavaScript, not jQuery Start Button: Init ...

Learn the process of using Python to copy HTML code to the clipboard

I am attempting to create a simple script in Python on Windows 10 that can copy a customized text hyperlink (Example) to the clipboard and maintain its recognition as HTML when pasted, much like how Microsoft Word handles custom text hyperlinks. I have at ...

Tips for incorporating css @keyframes within a cshtml file:

My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera) I found the ...

The ng-include feature seems to be malfunctioning

After building a basic web page using AngularJs, I ran into an issue when attempting to integrate header.htm into index.html - nothing was displaying in the browser. index.html <html> <script src="https://ajax.googleapis.com/ajax/libs/angul ...

Combining two strings to form a single variable using PHP

Currently, I have a registration form set up for users to register successfully into my database. However, I am looking to enhance this functionality by restricting registration to only users with specific domain addresses. After some research, I found tha ...

What is the best way to include a dialog div within a form tag?

I am facing an issue with a JQuery dialog on my webpage. The data entered into the dialog seems to get lost because the dialog is placed outside the form tag. Here is how it appears: https://i.stack.imgur.com/fnb07.png So far, I have attempted this soluti ...

Image background is not showing up in the input field

It seems like I've hit a roadblock with this issue. Despite my best efforts, I can't seem to find a solution. You can view the problem LIVE HERE. The banner's two input boxes should have background images displayed, but they are not showin ...

PHP, HTML, Email - Special characters in emails are being altered into other symbols

Here's the Situation... I am currently utilizing PHP to send out emails in a conventional manner... Snippet 0 mail('', $subject, $message, $headers); ... with the following content setup: Snippet 1 $boundary = uniqid('np&a ...