CSS render Issue

[Mohini89]

Hi Team,

I am trying to render the below HTML in DOCx. But GrabzIt just renders the text and seems the styles are ignored.

<div class="row" >
                <div class="col-sm-4 col-md-4" style="padding: 15px;">
                    <h6>Accepted by Client</h6>
                    <div style="height: 60px;border: 1px solid #000;padding: 6px; width: 60%;"> <div style="border: 1px dotted;height: 100%;"></div></div>
                    <div class="signature">Position:</div>
                    <div class="signature">Name:</div>
                    <div class="signature">Date:</div>
                </div>
                <div class="col-sm-4 col-md-4" style="padding: 15px;">
                    <h6>Accepted by Owner</h6>
                    <div style="height: 60px;border: 1px solid #000;padding: 6px; width: 60%;"> <div style="border: 1px dotted;height: 100%;"></div></div>
                    <div class="signature">Position:</div>
                    <div class="signature">Name:</div>
                    <div class="signature">Date:</div>
                </div>

<style>
.signature {
    padding: 10px 10px 10px 0px;
  }
</style>

Note: class signature style is included in the same page in style tag. To be Precise <div style="height: 60px;border: 1px solid #000;padding: 6px; width: 60%;"> <div style="border: 1px dotted;height: 100%;"></div></div> this is not rendering

[GrabzIt]

Can you please include the style tag so we can see what the error is!

[GrabzIt]

Thanks, so I tested your combined code:

<style>
.signature {
    padding: 10px 10px 10px 0px;
  }
</style>
<div class="col-sm-4 col-md-4" style="padding: 15px;">
                    <h6>Accepted by Client</h6>
                    <div style="height: 60px;border: 1px solid #000;padding: 6px; width: 60%;"> <div style="border: 1px dotted;height: 100%;"></div></div>
                    <div class="signature">Position:</div>
                    <div class="signature">Name:</div>
                    <div class="signature">Date:</div>
                </div>
                <div class="col-sm-4 col-md-4" style="padding: 15px;">
                    <h6>Accepted by Owner</h6>
                    <div style="height: 60px;border: 1px solid #000;padding: 6px; width: 60%;"> <div style="border: 1px dotted;height: 100%;"></div></div>
                    <div class="signature">Position:</div>
                    <div class="signature">Name:</div>
                    <div class="signature">Date:</div>
                </div>

Here: https://grabz.it/html-to-word-docx-api.aspx

It seems to work correctly applying the padding etc. The only thing it doesn't do is to render the divs as boxes, which as mentioned here isn't supported because of the number of HTML elements with borders would make the document a mess. You can however put borders on table cells.