Get content in iframe to use as much space as it needs

Question

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

EDIT: The reason why I use an iframe in the first place is so that CSS styles from the main page don't affect the elements inside the dialog. For example, a page that sets the text color to red, but I want the dialog text to remain plain black.

Answer 1

Your table gets set to 100%, but 100% of what? At the time of creating, there is no defined width of anything. If you specify a fixed width (i.e., not a percent), then the content.offsetHeight and .offsetWidth will have something to work with.

Answer 2

If you want it to be purely "modal" (so the user can't access the page behind) you'll want the IFRAME to take up the entire width and height of the main page.

An IFRAME cannot "autosize" itself based on its content, so your best bet would be to fill the entire page with the IFRAME, then place a DIV inside the IFRAME and center the DIV within the IFRAME to position your content. Unlike an IFRAME, the DIV should autosize, so you won't get any wrapping.

Another option would be to forego use of an IFRAME altogether and just use a DIV, though in older browsers, sometimes INPUTs show through a DIV regardless of Z-Index.

Also note that your code above will not necessarily be cross-browser compatible, as not all browsers reference an IFRAME's content document in the same way.

EDIT: based on your edit, ignore my suggestion to forego the IFRAME altogether.