OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Iframe overlaps DIV in Bootstrap-Container

  • Thread starter Thread starter nullpunkt
  • Start date Start date
N

nullpunkt

Guest
I have a problem to understand how to handle fix width in Flex-Container. Here I have a 1/10/1-Grid and in the first column I need to embed an iframe. It should have always a fixed width while the other 2 columns should be flexible.

How can I do that?

Code:
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
  <title>R24-Neu</title>
  <meta charset="utf-8">
  <link rel="icon" type="image/png" href="favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/styles.css?t=<?=str_replace(' ', '', microtime());?>" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </head>
<body class="d-flex flex-column h-100">
<div class="container-xxl mt-4" style="max-width: 1000px;">
  <div class="row">
  <div class="col-sm-1 bg-info">1
  </div>
  <div class="col-sm-10 bg-danger">2
  </div>
  <div class="col-sm-1 bg-secondary">3
  </div>
  </div>
  <div class="row">
    <div class="col-sm-1 bg-info"><iframe src="https://maps.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2702.2211736679656!2d8.531612115622265!3d47.36860157916956!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47900a0215fe7bc1%3A0xb1f301536e06dbe7!2sOberebenestrasse+47%2C+5620+Bremgarten+AG!5e0!3m2!1sde!2sch!4v1522527381540" width="250" height="180" frameborder="0"></iframe>
    </div>
    <div class="col-sm-10 bg-danger">b
    </div>
    <div class="col-sm-1 bg-secondary">c
    </div>
  </div>
</div>
</body>
</html>

Big thanks for assistance nullpunkt

I tried to set a css-width, but this ends in a wrap by bringing the other columns under the first.
<p>I have a problem to understand how to handle fix width in Flex-Container.
Here I have a 1/10/1-Grid and in the first column I need to embed an iframe. It should have
always a fixed width while the other 2 columns should be flexible.</p>
<p>How can I do that?</p>
<pre><code><!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<title>R24-Neu</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css?t=<?=str_replace(' ', '', microtime());?>" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="d-flex flex-column h-100">
<div class="container-xxl mt-4" style="max-width: 1000px;">
<div class="row">
<div class="col-sm-1 bg-info">1
</div>
<div class="col-sm-10 bg-danger">2
</div>
<div class="col-sm-1 bg-secondary">3
</div>
</div>
<div class="row">
<div class="col-sm-1 bg-info"><iframe src="https://maps.google.com/maps/embed?...emgarten+AG!5e0!3m2!1sde!2sch!4v1522527381540" width="250" height="180" frameborder="0"></iframe>
</div>
<div class="col-sm-10 bg-danger">b
</div>
<div class="col-sm-1 bg-secondary">c
</div>
</div>
</div>
</body>
</html>
</code></pre>
<p>Big thanks for assistance
nullpunkt</p>
<p>I tried to set a css-width, but this ends in a wrap by bringing the other columns under the first.</p>
Continue reading...
 

Latest posts

Top