Get content in iframe to use as much space as it needs
- by Mark
I'm trying to write a simple JavaScript based modal dialog. The JavaScript function takes the content, puts it in a new iframe and adds the iframe to the page. Works great so far, the only problem is that the content of the dialog (e.g. a table) gets wrapped, although plenty of space is available on the page.
I'd like the content of the dialog, a table in my case, to use as much space as it needs, without wrapping any lines. I tried lots of combinations of setting width/style.width on the iframe and the table. Nothing did the trick.
Here the code to show the iframe dialog:
function SimpleDialog() {
this.domElement = document.createElement('iframe');
this.domElement.setAttribute('style', 'border: 1px solid red; z-index: 201; position: absolute; top: 0px; left: 0px;');
this.showWithContent = function(content) {
document.getElementsByTagName('body')[0].appendChild(this.domElement);
this.domElement.contentDocument.body.appendChild(content);
var contentBody = this.domElement.contentDocument.body;
contentBody.style.padding = '0px';
contentBody.style.margin = '0px';
// Set the iframe size to the size of content.
// However, content got wrapped already.
this.domElement.style.height = content.offsetHeight + 'px';
this.domElement.style.width = content.offsetWidth + 'px';
this._centerOnScreen();
};
this._centerOnScreen = function() {
this.domElement.style.left = window.pageXOffset + (window.innerWidth / 2) - (this.domElement.offsetWidth / 2) + 'px';
this.domElement.style.top = window.pageYOffset + (window.innerHeight / 2) - (this.domElement.offsetHeight / 2) + 'px';
};
}
Here the test code:
var table = document.createElement('table');
table.setAttribute('style', 'border: 1px solid black; width: 100%;');
table.innerHTML = "<tr><td style='font-size:40px;'>Hello world in big letters</td></tr><tr><td>second row</td></tr>";
var dialog = new SimpleDialog();
dialog.showWithContent(table);
The table shows up nicely centered on the page, but the words in the first cell are wrapped to two lines. How do I get the table to use as much space as it needs (without using white-space: nowrap ;)
Thanks in advance for any suggestions!
-Mark
