Container Requirements (Width/Height)

Guide explaining when and how to add explicit width/height to the Calcumate container to fix layout issues in iframes, site builders, and other environments where dimensions aren't inherited naturally

Container Requirements (Width/Height)

Why does Calcumate need a container with defined dimensions?

When Calcumate initializes, 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 initialization 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 initialize.

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)

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:

Inspect the container: Use browser developer tools (F12) to check if calcumate-root has a computed width greater than zero.
Add explicit dimensions: Apply the recommended inline style to your calcumate-root div.
Clear cache and refresh: Perform a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) to ensure you're seeing the latest changes.
Check responsive behavior: Test both desktop and mobile viewports to ensure the calculator displays correctly at all sizes.
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.

PreviousCalcumate Supported Languages NextCalcumateInitialized Event

Last updated 5 months ago

Was this helpful?

Container Requirements (Width/Height)