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:

The desired outcome should resemble this image:

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

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displaying a tooltip when hovering over a ...

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

Is there a way to ensure all images have uniform height using CSS?

I manage a dating platform where I showcase user profiles along with their profile pictures. In case a user doesn't have a profile picture, I show a specific default image. Below is the code snippet: @register.inclusion_tag(filename='accounts/pr ...

What is the process for using AJAX and PHP to upload an image file?

I'm facing an issue where I want to insert an uploaded image into a database with user details for a profile picture. The output I receive currently shows {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}. How can th ...

Can you explain the meaning of this compound CSS selector?

.btnBlue.btnLtBlue Is this referring to an element that has both the classes btnBlue and btnLtBlue applied? ...

Having trouble with jQuery loading for the first time

I am having trouble getting the jQuery to load properly. My goal is to toggle classes on specific items identified by their ID. When an item is clicked, I want it to have the class "menu-selected" while the other item has the class "unselected." I have i ...

Dealing with CSS overflow issues in Safari, Chrome, and the ancient IE 6

Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...

What reasons could explain why the more efficient approach of offering an initial portion of data is not faster in practice?

My website contains numerous pages with a plethora of small images that need to be loaded. To enhance user experience, I devised two methods to first display a subset of the content without waiting for the entire page to load. The data is stored in a .json ...

Displayed in the xmlhttp.responseText are the tags

Why do tags appear when I input xmlhttp.responseText into my textbox? It displays <!DOCTYPE html><html><body></body></html> along with the desired content. Is there a way to prevent the tags from being displayed? Here is the ...

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text? HTML <h1 id="hover">Hover over me</h1> <div id="squash"> <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%"> </div&g ...

When I trigger a function by clicking, I also set a timeout of 1 second. Is it possible to deactivate this timeout from within the function itself?

One button triggers a function with a timeout that repeats itself upon clicking. Here's the code snippet: function chooseNum() { let timeout = setTimeout(chooseNum, 1000); } To disable this repeating function, I attempted another function like so ...

What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

I need to create an oval shape with a strip inside to represent the level of liquid volume. Here is my initial attempt: <style scoped> .strip:before { position: absolute; background: #343434; border-bottom: 2px solid black; content: ""; ...

Strip the CSS styling from an image (the CSS being included in the generated code)

I need to remove the CSS styling from an image, but I can't modify the generated code where it's coming from. My actual code looks like this: <div class="bubble"> <img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png ...

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

Is there a way to update page content without having to refresh the entire page?

My goal is to refresh specific content on a page without having to reload the entire page using JavaScript or jQuery. Since my project is built in PHP and JavaScript, I encountered this issue. Note : I want the page content to refresh when a user performs ...

Media queries do not trigger the execution of CSS code

I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...

Ways to eliminate the gap produced by a fixed element

Why is my chatbox (marked in red) creating unnecessary space at the top (highlighted in yellow), even though it has a sticky position and should not be affecting that area? The other elements on the webpage seem to be impacted by this. How can I prevent th ...

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

I have a single-image container that I need to resize when editing the content. The size should adjust based on the incoming content. See the images of the containers below: Image 1: This is the container before clicking on the edit button. Image 2: This ...