DDX export PDF without margin

Jessica
Jessica Contributor

Hey writing a DDX table card to replace regular DOMO table because the margin around the table is making our PDF export for the dashboard push over.

Attached picture,

DDX table is the 1st

DOMO table is the 2nd.

You can see how much bigger the margin is on the top card and on the bottom it's almost zero.

I have nothing in css code that would create a margin or padding around the DDX table. Any ideas on how I can remove it? CSS code is below

body {
font-family: 'Open Sans';

background-color: #11ffee00;
}

#myTable {
width: 100%;
height: 100%;
border-collapse: collapse;
border: 2px solid #d6d6d6;}

th {
font-size: 16px;
font-weight: 900;
text-align: center;
background-color: #D9EBFD;}

td {
font-size: 14px;
padding-top: .5

px;
border: 1px solid #d6d6d6;}

td.text{
color: #ffffff;
text-align: left;
width: 64%;
}

td.number{
color: #000000;
text-align: right;
width: 12%;}

Tagged:

Best Answer

  • GrantSmith
    GrantSmith Coach
    Answer ✓

    Hi @Jessica

    What does your HTML code like? Are you including your graph in a <div> tag? Have you set the margin on your <div> tags in the CSS to be 0?

    Also you could add a colored border to your div or other tags to see where they're actually being displayed to help diagnose your issue if it's within your HTML code or if Domo is adding the padding within the card.

    **Was this post helpful? Click Agree or Like below**
    **Did this solve your problem? Accept it as a solution!**

Answers

  • GrantSmith
    GrantSmith Coach
    Answer ✓

    Hi @Jessica

    What does your HTML code like? Are you including your graph in a <div> tag? Have you set the margin on your <div> tags in the CSS to be 0?

    Also you could add a colored border to your div or other tags to see where they're actually being displayed to help diagnose your issue if it's within your HTML code or if Domo is adding the padding within the card.

    **Was this post helpful? Click Agree or Like below**
    **Did this solve your problem? Accept it as a solution!**
  • Agreeing with what Grant put here, and adding a little more. It would be very helpful to see the HTML code as well.

    If your table card is contained within a <div> or other elements, check these containers as well. Ensure that margins, padding, and borders are properly managed. Applying styles like margin: 0; and padding: 0; to these containers might help eliminate unexpected spacing.

    Double-check the border and padding properties for the elements surrounding the table card. Both CSS border and padding properties can affect the overall appearance. If there's a specific border causing the issue, you can try removing or adjusting it. Also, remember to ensure that border-collapse and related properties are consistent and not inadvertently affecting the rendering.