Styling an extlib Dialog with an iframe in it

Question

So, I find myself in a strange place. In an XPage, I pop up a Dialog control from the Extension Library. Nothing special. Now, that dialog must contain an <iframe> and that's where it gets hairy.

That iframe holds some content, so I need to style it so it is large enough to show everything without scroll bars. Hence, I need to resize the Dialog to accommodate that.

The pared-down html for the dialog is as follow :

<div
    class="dijitDialog dijitDialogFocused dijitFocused"
    role="dialog"
    ...
    style="position: absolute; left: 624px; top: 250px; opacity: 1; z-index: 950;"
    >
    <div ... class="dijitDialogTitleBar"...>
        ...
    </div>
    <div class="dijitDialogPaneContent" style="width: auto; height: auto;">
        <div id="view:_id1:dialogEditPerson:_content">
            <form id="view:_id1:dialogEditPerson:_content:form1" method="post" action="..." class="xspForm"...>
                <div ...>
                    <iframe ... src="..."></iframe>
                </div>
            </form>
        </div>
    </div>
</div>

So far, the dijitDialogEtc classes come from tundra.css, out of the box. I suppose I'll overload them in my own .css

Now I'm a bit puzzled by some traits :

where does the inline style, specially height and width, come from ? How can I act on them ?
inside the <div class="dijitDialogPaneContent" ... is another div, nameless, classless. How do I get hold of it ? Ultimately, that's my core concern : until I style it the way I see fit, all other efforts are in vain.

Any hint greatly appreciated.

Thanks

Knut Herrmann Knut Herrmann · Accepted Answer · 2016-11-19T12:37:48

Add a panel as the root element to your dialog box and give it a width and height:

<xe:dialog
    id="dialog1">
    <xp:panel
        style="width:500px;height:300px">
        ... your elements like iframe ...
    </xp:panel>
</xe:dialog>

The size of dialog box gets automatically computed depending on your content size. It is the panel with the given size in this case.

If the iframe is the only content of your dialog box then you can set the size to iframe itself:

<xe:dialog
    id="dialog1">
        <iframe style="width:500px;height:300px" src="http://..." />
</xe:dialog>

Styling an extlib Dialog with an iframe in it

1 Answers