Orbeon Search

Comments? Feedback?

This wiki does not yet support public comments (a limitation of Google Sites), so we encourage you to post your comments either:

On Twitter by responding to @orbeon.

On our community mailing list: subscribe sending an email to ops-users-subscribe@ow2.org (content of subject/body doesn't matter), you'll get a response with the email to use to send your message to the community mailing list.

Recent site activity

XForms - Markup and Styling


Dialog Height and Width Relative to Viewport

Imagine you want to create a dialog which size is relative to the size of the viewport. The screenshot below shows such a dialog which size has been set to be 60% of the width of the viewport and 50% of the height of the viewport.


Assuming that the ID of you dialog is myDialog (because you declared the dialog with <xxforms:dialog id="myDialog">) the following CSS will set your dialog width to be 60% of the width of the viewport and its height to be 50% of the height of the viewport. If you wish to change the ratio (60%/50%), you only need to change those values under #myDialog_c and you can keep all the other value unchanged.

#myDialog_c {
    width: 90%;
    height: 80%;
    /* HACK: fix for IE 6 vertical constraint */
    _height: expression((YAHOO.util.Dom.getViewportHeight() * 0.8)+"px");
    /*background-color: red;*/
}

#myDialog {
    width: 100%;
    height: 100%;
    border: none;
}

#myDialog .xxforms-dialog-body {
    padding: 10px;
    height: 95%; /* HACK: try to approximate "height of #fckDialog minus height of header", will be imprecise */
    overflow: auto;
    position: absolute; /* http://www.nabble.com/Re:-autocomplete-fields-within-a-yui-dialog-with-scrollbar-p17405418.html */
}

.yui-skin-sam .yui-panel .xxforms-dialog-head, .yui-skin-sam .yui-panel .xxforms-dialog-body {
    width: 100%; /* works with browsers which have box-sizing, and IE 6 which is buggy */
    *width: 97%; /* approx for IE 7 */
    _width: 100%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
}