CODEWITHSUNDEEP
htmlcsspdftcpdfborder-radius
user9437856
user9437856

Reputation: 2388

Why border-radius not working in tcpdf and how to display the text in one line?

I am using tcpdf and I have to display the circle and text should be in one in the pdf. I tried below code but border-radius is not working

I am getting below output

enter image description here

My expected output is enter image description here

This is the code I am using

$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>';

Upvotes: 0

Views: 5808

Answers (2)

Eliaser
Eliaser

Reputation: 11

You only have to change in border-radius: 50px --> 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>

Upvotes: 1

Alex Douglas
Alex Douglas

Reputation: 221

If I'm understanding this correctly, you want to have the 'Demo' texts in each coloured section? If so, consider the following changes:

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

Remove <p> and <div> and replace it with <span>, then control the amount of padding around each text using padding.

Upvotes: 0

Related Questions