Question 216177 in Html Question posted in
Some basic documentation can be found here.

Html – Dynamic resizing and size adjustment on static element

I am new to sof so please let me know if the information I have given is incomplete or insufficient.

I have to iFrames sitting side by side. I want to be able to resize them on the x-axis and when I resize one of them, the other resizes accordingly to fit the screen.

I got the resizing one of them part down but the other element does not resize specifically the that contains "docWindow" iFrame.

Here is the relevant html (let know if insufficient):

.resizable {
  display: flex;
  margin: 0;
  padding: 0;
  resize: horizontal;
  overflow: hidden
}

.resizable>.resized {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  border: 0
}

.ugly {
  background: red;
  border: 4px dashed black;
}

#container2 {
  flex: 0 0 225px;
  left: 25px;
  top: 108px;
  height: 828px;
  border: thin solid black;
  position: absolute;
  width: 225px;
  margin-bottom: 100px;
  background-color: #e9e9ed;
  word-wrap: break-word;
}

#container1 {
  flex: 1;
  border-left: none;
  border-right: thin solid black;
  border-bottom: thin solid black;
  border-top: thin solid black;
  position: relative;
  left: 245px;
  top: 100px;
  background-color: #e9e9ed;
}
<div style="display: flex;">
  <div class="resizable ugly" id="container1">
    <iframe class="resized" frameborder="1" height="828" width="1580" id="docWindow" name="docWindow" scrolling="yes" src="placeholder_page.html" style="position:relative;"></iframe>
  </div>
  <div class="resizable ugly" id="container2">
    <iframe class="resized" frameborder="1" height="830" id="navbarFrame" name="navbarFrame" scrolling="yes" width="225" src="parent-nav-buttons.html" style="position:relative;"></iframe>
  </div>
</div>
Tags:

2

Answers


  1. 0

    No need to use those complex relative and absolute positioning. You only need two flex element with felx-grow:1 and width="100%" and height="100%" for iframes. That’s all.

    .resizable {
  display: flex;
  margin: 0;
  padding: 0;
  resize: horizontal;
  overflow: hidden;
  border:1px solid red;
  flex-basis: 0;  /* Aded for Safari */
}


#container2 {
  flex-grow:1;
  height: 400px;
}

#container1 {
  flex-grow:1;
  height: 400px;
}
    <div style="display:flex">
  <div class="resizable ugly" id="container1">
    <iframe class="resized" frameborder="1" height="100%" width="100%" id="docWindow" name="docWindow" scrolling="yes" src="placeholder_page.html"></iframe>
  </div>
  <div class="resizable ugly" id="container2">
    <iframe class="resized" frameborder="1" height="100%" width="100%" id="navbarFrame" name="navbarFrame" scrolling="yes"  src="parent-nav-buttons.html"></iframe>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Grid works better than flexbox for this scenario, because you can set the width of the left column to auto so that it adjusts to fit its contents (the resizable iframe) and set the width of the right column to 1fr to consume all of the remaining space. Give the left iframe a specified width, and make the right iframe 100% width.

    .d1 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px;
}
.d1 iframe {
  display: block;
  border: 5px solid blue;
  box-sizing: border-box;
  background: yellow;
  min-width: 80px;
}
.d1 iframe:first-child {
  width: 200px;
  max-width: 100%;
  resize: horizontal;
}
.d1 iframe:last-child {
  width: 100%;
}
    <div class="d1">
  <iframe></iframe>
  <iframe></iframe>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search