Styling embedded application containers

When embedding an application, styling its container correctly ensures a consistent, responsive, and user-friendly experience. This guide outlines best practices for defining container dimensions, handling responsiveness, and managing layout constraints.

Note: This guide assumes some basic familiarity with HTML and CSS. If you're new to web development, consider reviewing foundational concepts before applying these best practices.

Define a clear container structure

Each embedded application needs a dedicated container within the web page. The container should:

• Be an empty html element (usually a <div>) that serves as the target for embedding.
• Have an explicit width and height to prevent rendering issues.
• Be styled appropriately to integrate seamlessly within your layout.

Example container:

<div id="embedded-app"></div>  

Set explicit width and height

The embedded application loads inside an iframe, which is configured with width: 100% and height: 100%. This means the container's dimensions determine the size of the embedded application, making proper styling essential.

Full-page embed

If the embedded application should take up the full screen, you could use:

#embedded-app {  
  width: 100%;  
  height: 100vh; /* Full viewport height */
}  

This is useful when the application functions as a standalone experience and needs to fit the entire screen.

Fixed-size embed

If the embedded application should fit within a specific section of the page, define a fixed width and height:

#embedded-app {  
  width: 600px;  
  height: 800px;  
}  

This works well when embedding the application into a predefined section within a larger layout.

Make it responsive

If the embedded application is to be placed within a responsive layout, the container should be designed to adapt to different screen sizes. For example, using percentage-based widths and flexible height values allows the integration to scale appropriately across various devices and viewport sizes.

Example:

#embedded-app {  
  width: 100%;  
  max-width: 900px;  
  height: auto;  
  min-height: 500px;  
}  

Consider overflow and scrolling

By default, embedded applications may not automatically adjust their height to fit their content. If the integration has scrolling content, make sure to handle with overflow rules.

Example:

#embedded-app {  
  width: 100%;  
  height: 600px;  
  overflow: auto;  
}  

This prevents content from being clipped and makes sure the content scrolls should the need require.