CODEWITHSUNDEEP
htmlcssiframe
Umar Gora
Umar Gora

Reputation: 69

Iframe is not spanning full width

I'm currently using a an iframe inside the modal to display some information. However, this iframe refuses to take the full height and width of its container. Here is what I have now:

What I've now

This first bit of code is the CSS for the modal the iframe is inside of

.uiModalContent {
  background: #ffffff;
  width: 900px;
  height: 550px;
  position: relative;
  overflow: auto;
  padding: 20px;
  border: #222222 1px solid;
}

This is what the iframe has

<iframe id="ifrmEmail" class="resizeableIframe" name="ifrmEmail" scrolling="no" frameborder="0" height="242" width="100%"></iframe>

I've changed the height and width to 100% however when I do so, the uiModalContent gets a scroll bar which isnt ideal. Does anybody know a work around?

Upvotes: 0

Views: 404

Answers (2)

Sathishkumar
Sathishkumar

Reputation: 429

give Position: absolute;, Width and height to 100%,

.uiModalContent {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: auto;
  padding: 0;
  border: #222222 1px solid;
}

Upvotes: 0

display-name-is-missing
display-name-is-missing

Reputation: 4409

Simply remove the padding you have for .uiModalContent, or set it to 0.

Fiddle.

Upvotes: 2

Related Questions