Container Requirements (Width/Height)

Why does Calcumate need a container with defined dimensions?

When Calcumate initialises, it attempts to measure and reserve space in the DOM to properly render the calculator interface. The calculator uses this measurement to determine responsive breakpoints, layout proportions, and component sizing.

In standard web page implementations, the calcumate-root div naturally inherits a usable width from its parent elements. However, certain environments prevent this inheritance, causing the container to report a width of 0 or an undefined value. When this happens, Calcumate cannot calculate proper dimensions, resulting in layout failures or the calculator not loading at all.

When do container width issues occur?

Container width problems most commonly appear in these scenarios:

Iframe Embedding When using web editors like Wix, GoDaddy, Framer, Squarespace, or similar CMS platforms that embed custom code inside iframes, the calcumate-root div may not inherit any natural width from the parent document.

Site Builders with Isolated Containers Some site builders place custom HTML blocks inside containers that have no explicit dimensions, use display: inline, or are hidden during initial page load.

CSS Frameworks with Flex/Grid Layouts Containers using flex or grid layouts without explicit sizing can result in zero-width children until content forces expansion—which Calcumate cannot trigger during its initialisation phase.

Delayed or Lazy-Loaded Sections If your calculator is inside a tab, accordion, modal, or lazy-loaded section that starts hidden (display: none), the container may report zero dimensions when Calcumate first tries to initialise.

Symptoms of missing container dimensions

If your container lacks proper dimensions, you may experience:

• Calculator not appearing at all (blank space)
• Calculator appearing extremely small or compressed
• Layout elements overlapping or misaligned
• JavaScript console errors related to dimension calculations
• Calculator loading on desktop but failing on mobile (or vice versa)

Recommended Solution

Add explicit width styling to your calcumate-root div:

<div id="calcumate-root"
     data-integration="www.yourdomain.com"
     data-ref="your-ref-code"
     data-int="your-int-code"
     style="width: calc(100vw - 40px); max-width: calc(100vw - 40px);">
</div>
<script src="https://production.calcumate.co/static/js/main.js"></script>

The calc(100vw - 40px) formula provides viewport-relative sizing with a small margin to prevent horizontal scrollbars.

Alternative sizing approaches

Depending on your specific setup, you may prefer different width values:

Fixed width for consistent sizing:

style="width: 980px; max-width: 100%;"

Percentage-based for flexible layouts:

style="width: 100%; max-width: 1200px;"

Viewport-relative without margins:

style="width: 100vw; max-width: 100vw;"

Iframe-Specific Recommendations

When embedding Calcumate inside an iframe, you need to configure both the iframe dimensions and the container within it.

Recommended iframe dimensions

Device	Width	Height
Desktop	980px	800px
Mobile	350px	850px

Complete iframe implementation example

<!-- On your main page -->
<iframe
    src="https://yourdomain.com/calculator-page"
    width="980"
    height="800"
    style="border: none; max-width: 100%;"
    title="Storage Calculator">
</iframe>

<!-- On the calculator page (inside the iframe) -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { margin: 0; padding: 10px; }
    </style>
</head>
<body>
    <div id="calcumate-root"
         data-integration="your-data-integration"
         data-ref="your-data-ref"
         data-int="your-data-int"
         style="width: calc(100vw - 40px); max-width: calc(100vw - 40px);">
    </div>
    <script src="https://production.calcumate.co/static/js/main.js"></script>
</body>
</html>

When should you apply these styles?

Apply explicit width styling when:

• Embedding through Wix, GoDaddy, Framer, Squarespace, or similar site builders
• Placing the calculator inside an iframe
• Using CSS frameworks that don’t provide natural container widths
• The calculator appears inside tabs, modals, accordions, or collapsible sections
• You experience any of the symptoms described above
• You’re unsure about your container’s natural dimensions

You may not need explicit styling when:

• Embedding directly into standard HTML pages with normal document flow
• Your container already has explicit CSS width defined elsewhere
• The calculator is loading correctly without any layout issues

Troubleshooting steps

If you’re experiencing layout issues, follow these steps:

1. Inspect the container: Use browser developer tools (F12) to check if calcumate-root has a computed width greater than zero.
2. Add explicit dimensions: Apply the recommended inline style to your calcumate-root div.
3. Clear cache and refresh: Perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to ensure you’re seeing the latest changes.
4. Check responsive behaviour: Test both desktop and mobile viewports to ensure the calculator displays correctly at all sizes.
5. Verify parent containers: Ensure no parent element is constraining or hiding your calculator container.

Need more help?

If you’ve followed this guide and are still experiencing issues, please contact our support team with:

• Your website URL where the calculator is embedded
• Screenshots of the issue (desktop and mobile if applicable)
• Browser console errors (if any)
• Your CMS or site builder platform name

We’re here to help ensure your Calcumate integration works perfectly.