The lower div is overlapping the upper div in a smaller viewport

I have integrated some dashboard widgets in iframes and I want to ensure they are responsive. My goal is for each widget to occupy full width when the screen size is reduced, but appear side by side when the browser window is large (md+):

iframe {
  background: pink;
  border: 1px solid #333 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4a595e1fbe3fbe7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="flex-row container-fluid col-xs-12 col-xl-8 pl-0 pr-0 pl-lg-4 pr-lg-4">
  <div class="row" style="padding-bottom: 160px;">
    <div class="col-12 col-md-6 pr-1 mt-1 col">
      <iframe src="iframe-link" allowfullscreen="" style="display: initial; height: 200%; border: 0px; width: 100%;"></iframe>
    </div>

    <div class="col-12 col-md-6 pl-md-1 mt-1 col">
      <iframe src="iframe-link" allowfullscreen="" style="display: initial; height: 200%; border: 0px; width: 100%;"></iframe>
    </div>
  </div>
</div>

The challenge I'm facing is that when I reduce the browser window, the upper iframe overlaps with the lower one:

https://i.sstatic.net/q3GDi.png

Any suggestions on how to resolve this issue?

PS: The libraries/frameworks I am utilizing include:

"react-bootstrap": "^1.4.3"
"bootstrap": "^4.6.0",
htmlcsstwitter-bootstrapbootstrap-4react-bootstrap

Answer №1

There are some issues to address here. It's not recommended to have a container, flex row, and column all on the same element. I recommend reviewing the grid and flex documentation before deciding which to use.

It's important not to disrupt the grid layout by adding padding to containers and rows. These elements are carefully designed, and padding can cause layout problems. To add more spacing around your content, apply padding to the column or use margin on the content itself. If you need to adjust default column spacing, refer to the gutter documentation.

I have removed the 200% height from the iframes. It's generally better to let them maintain their natural height.

In Bootstrap 4+, there is no col-12. Instead, use classes for specific breakpoint ranges where columns should be defined. The element will automatically be full-width on smaller screens.

Avoid using inline styles as they can create confusion and require unnecessary repetition. Utilize the library provided and create custom CSS classes for any additional styling needed.

iframe.my-class {
  display: initial;
  border: 0px;
  width: 100%;
  background: pink;
  border: 1px solid #333 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0ePTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"></link>

<div id="myContainer" class="container-fluid">
  <div class="row">
    <div class="col-md-6 mt-1">
      <iframe src="iframe-link" allowfullscreen class="my-class"></iframe>
    </div>

    <div class="col-md-6 mt-1">
      <iframe src="iframe-link" allowfullscreen class="my-class"></iframe>
    </div>
  </div>
</div>

Answer №2

Introducing the .iframe-container to establish a responsive container for the iframe element

.iframe-container {
  position: relative;
  /*adjust as necessary to modify height*/
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: orange;
  border: 1px dotted black !important
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343372d352d31">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<style>

</style>

<div id="myContainer" class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-6 pr-md-1 mt-1">
      <div class="iframe-container">
        <iframe src="iframe-link" allowfullscreen=""></iframe>
      </div>
    </div>

    <div class="col-sm-12 col-md-6 mt-1">
      <div class="iframe-container">
        <iframe src="iframe-link" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>

Answer №3

Your code had a problem with setting the height: 200% for iframe elements, which meant they were taking up double the height of their parent and causing them to overflow from the parent body.

A simple solution was to set height: 100% for the iframe element so it would take up the full height of its parent div.

Here is the updated code:-

    iframe {
      background: pink;
      border: 1px solid #333 !important;
    }
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bca6bea6ba">[email protected]</a>/dist/css/bootstrap.min.css"
    integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div id="myContainer" class="flex-row container-fluid col-xs-12 col-xl-8 pl-0 pr-0 pl-lg-4 pr-lg-4">
    <div class="row" style="padding-bottom: 160px;">
      <div class="col-12 col-md-6 pr-1 mt-1 col">
        <iframe src="iframe-link" allowfullscreen=""
          style="display: initial; height: 100%; border: 0px; width: 100%;"></iframe>
      </div>

      <div class="col-12 col-md-6 pl-md-1 mt-1 col">
        <iframe src="iframe-link" allowfullscreen=""
          style="display: initial; height: 100%; border: 0px; width: 100%;"></iframe>
      </div>
    </div>
  </div>

Always consider the parent element when using percentages. This update should help resolve the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can JavaScript pass a variable through the URL?

I am attempting to pass a variable through the URL: http://localhost/new_wiki/test.php?id=http://example.com In my code, I have var first = getUrlVars()["id"];. This line is supposed to pass the value but it doesn't seem to be working. Can someone pl ...

javascriptphphtml

Verifying username using an Ajax call

Currently, I am working on developing a signup form using HTML/CSS/JS that involves utilizing an AJAX request to interact with the server. Within my jQuery code, I have implemented a method for validating the form inputs, which also triggers a function (en ...

javascriptphpjqueryhtmlajax

Using CSS styling to dictate how browsers display web content, specifically through setting font size measurements in EM

On different mobile devices and various browsers such as Internet Explorer and Mozilla, the font size in some divs does not appear consistent. Specifically, on a Samsung Galaxy S6. I am using EM units: I know it may not be ideal but I prefer this method a ...

csscross-browserfont-size

Tips on adjusting sticky behavior for responsiveness using bootstrap-4

In my project, I am utilizing angular with bootstrap. The header of the project consists of two parts and a content area. However, when the resolution is small, the header wraps. Check out the header and content on large screens View the header and conte ...

cssangularbootstrap-4responsivesticky

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

Implementing a Moving Background Image with CSS3 or jQuery

I am facing an issue with a background image that has a file size of 4+ MB in PNG format. My website is a single page website and I want to use this background image, but I'm unsure how to go about it. Is there a way to reduce the size of the image s ...

jqueryhtmlcss

Starting a div programmatically and then running into trouble when trying to close it, an error was encountered with an end tag for "div" without a corresponding start tag

I am looking to create the following HTML structure: <div id="my-grid" class="isotope"> <div class="myProject-item">....</div> <div class="myProject-item">....</div> <div class="myProject-item">....</div> ...

jqueryhtmlcssasp.net-mvcrazor

Issue with Error in Expanding Label in Material-Ui using React

I have managed to increase the size of the Label in the TextField component of my React application. However, I am encountering an issue where it overlaps some text on its right when it shrinks. https://i.sstatic.net/BikHJ.png Here is the link for refere ...

cssreactjsmaterial-uijss

Creating Dynamic HTML Links with C# Programming

In the web application I am working on, there is a menu that looks like this: <div> <ul> <li><a href="http://localhost:52451/Voronezh/Settings.aspx">Settings</a</li> <li><a href="http://localhost:52451/L ...

c#htmlasp.net

Troubleshooting a jQuery Drop-Down Problem

My dropdown menu is not working as expected. I want to show the sub-menu when clicking on an item, and remove the previous sub-menu when clicking or blurring on another menu by removing the drop-down class. However, my current jQuery code does not seem to ...

jqueryhtmlcssclassdrop-down-menu

The height of the navigation bar adjusts to fit the image

I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated! htm ...

htmlcss

In search of a way to verify if a string contains a specific word

I'm currently working on a dynamic tooltip feature. My goal is to detect multiline tooltips by checking if my data includes \r. The code snippet below is an example of how I am trying to analyze my description, but so far, I have been unsuccessfu ...

javascriptjqueryasp.nethtml

Animating a dropdown menu with jQuery

I have a typical submenu structure set up like this: <ul> <li> <a href="#">Parent link</a> <ul> <li><a href="#">Submenu link</a></li> </ul> </li> </ul> In my de ...

javascriptjquerycssanimationdrop-down-menu

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

javascripthtmlvue.js

Submitting values using the serialize method and Ajax involves sending placeholders

Looking for a solution: <form class="pure-form pure-form-stacked" method="post" enctype="multipart/form-data"> <input type="text" name="name" class="button-size-1" placeholder="*Name"> <input type="text" name="email" class="but ...

javascriptjqueryhtmlajaxserialization

Showing a collection of cards within a dynamic container set up in a 3x3 grid layout to start

In an attempt to showcase cards within a responsive container utilizing bootstrap and django, my goal is to create a 3x3 grid layout on extra-large screens with scrollable overflow that adjusts based on device width. Initially, I experimented with wrapping ...

javascripthtmlcssdjangobootstrap-4

What steps should be taken to retrieve the contents of a file that has been chosen using the browse

You have successfully implemented a browse button that allows the user to navigate the directory and choose a file. The path and file name are then displayed in the text element of the Browse button complex. Now, the question arises - how can I extract dat ...

javascriptjquerypythonhtmldom

Accordion feature exclusively toggles the initial item

I am having an issue with the code in my index.php file. Only the first item in the accordion menu is showing up correctly. When I click on "Status" or "Repeated", I expect to see the sub-menu of the clicked item, but instead, I am getting the result from ...

javascripthtmlnode.jsreactjs

Is it possible for the content of the HTML Select to vary from the options displayed in the 'drop-down' menu that the user chooses from?

When a user clicks on a dropdown menu, I want them to see the full state names in the options like this. <select name="address_region" id="address_region"> <option value=1>Alabama</option> <option value=2&g ...

jqueryhtmlselect

Is it possible to create .html files using the provided list of words?

Can we create .html files from a word list? Check out the example shown in the attached image. Thank you! View Image ...

htmltext