0

I want to be able to resize a div using resize feature in css. In my .css file I have:

#test {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: both;
    overflow: auto;
}

My div is the following:

<div id="test">Let the user resize both the height and the width of this div element.</div>

It works fine until I put my html in an iframe, there I can't resize the div. What's wrong?

PS: I dont' want to use jquery

Laetis
  • 1,337
  • 3
  • 16
  • 28

1 Answers1

2

The iframe is handled as a new website. To apply your css to your iframe - simply set the reference to you stylesheet, within your iframe.

<iframe id="frame"></iframe>

<script>
document.getElementById('iframe').contentWindow.document.write("<html><head>" +
"<link rel='stylesheet' href='style.css'>" + 
"</head><body><div id='test'></div></body></html>");
</script>

By this your iframe will access your stylesheet correclty

Frnak
  • 6,601
  • 5
  • 34
  • 67