Large bootsrap dialog from extlib focus on the bottom

Question

I have a dialog from the ExtLib and I use the boostrap konfiguration. When the dialog open the focus is on the bottom of the dialog. If the dialog bigger then the screen I don't see the top of the dialog and I must scroll. This is not what I want. Is there a solution for that? In my dialog are only computed values.

Edit: Here an example.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <style type="text/css">
        .bgSizeCover {
            height: 300px;
            width: 300px;
            background-size: cover;
            background-position: center center
        }
        .txtpos {
            width: 100%;
            height: 70px;
            position: absolute;
            bottom: 0px;
            left: 0;
            background: rgba(245,245,245,0.75);
        }
        /*modal*/
        .modal-dialog {
          width: 90%;
          margin-left: -250px;
        }
        .modal-content {
          width: 95%;
        }
    </style>
    <xp:div>
        <xp:this.styleClass>
            <![CDATA[#{javascript:
                var grid = "col-xs-12 col-sm-12 col-md-12 col-lg-12";
                return "overflow-ellipsis " + grid;}]]>
        </xp:this.styleClass>
        <xp:this.style><![CDATA[#{javascript:"min-width: 250px"}]]></xp:this.style>
        <xp:panel
            tagName="a"
            id="datarow"
            styleClass="list-group-item bgSizeCover">
            <xp:this.attrs>
                <xp:attr name="onclick">
                    <xp:this.value>
                        <![CDATA[XSP.openDialog("#{id:dialog1}");]]>
                    </xp:this.value>
                </xp:attr>
            </xp:this.attrs>
            <xp:this.style>
                <![CDATA[#{javascript:
                    "background-image: url('http://placehold.it/640x640/')"
                }]]>
            </xp:this.style>
            <div class="txtpos">
                <xp:text
                    id="label"
                    tagName="h4"
                    style="padding-right:7px">
                    <xp:this.value><![CDATA[#{javascript:"Title"}]]></xp:this.value>
                </xp:text>
                <xp:text
                    tagName="p"
                    id="computedField1"
                    styleClass="rowDetails">
                    <xp:this.value>
                        <![CDATA[#{javascript:"Number"}]]>
                    </xp:this.value>
                </xp:text>
            </div>
        </xp:panel>
    </xp:div>
    <xe:dialog
        id="dialog1"
        styleClass="modal-dialog"
        title="Title"
        tooltip="Modal">
        <xe:dialogContent
            id="dialogContent1"
            style="modal-content">
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField14"
                    value="Projekt">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField15"
                    value="Name">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField4"
                    value="Auftraggeber">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField5"
                    value="RefBPRefSheet">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField6"
                    value="Leistungszeitraum">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField7"
                    value="RefVestingPeriod">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField8"
                    value="Projektvolumen">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField9"
                    value="RefProjVolumeString">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField10"
                    value="Projektbeschreibung">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField11"
                    value="RefProjDescriptRefSheet">
                </xp:text>
            </xp:div>

            <xp:div style="text-align:left;font-weight:bold;color:rgb(3,124,194)">
                <xp:text
                    escape="true"
                    id="computedField12"
                    value="Ingenieurleistungen">
                </xp:text>
            </xp:div>
            <xp:div style="text-align:left">
                <xp:text
                    escape="true"
                    id="computedField13"
                    value="RefServicesRefSheet">
                </xp:text>
            </xp:div>

            <xp:image
                styleClass="img-rounded"
                url="http://placehold.it/640x640/"
                id="personpic">
            </xp:image>
        </xe:dialogContent>
        <xe:dialogButtonBar id="dialogButtonBar1">
            <xp:button
                value="Schließen"
                id="buttonClose"
                styleClass="btn btn-default">
                <xp:eventHandler
                    event="onclick"
                    submit="true"
                    refreshMode="partial"
                    refreshId="dialog1">
                    <xp:this.action>
                        <![CDATA[#{javascript:getComponent("dialog1").hide()}]]>
                    </xp:this.action>
                </xp:eventHandler>
                <i class="glyphicon glyphicon-remove" />
            </xp:button>
        </xe:dialogButtonBar>
    </xe:dialog>
</xp:view>

Answer 1

Dialogs from the ExtLib use Dojo. Even if you have the Bootstrap theme enabled: it's still a Dojo dialog, only the CSS (and some HTML) is different to give it the Bootstrap look.

By default a Dojo dialog sets the focus on the first focusable element it finds in the dialog: that's an accessibility feature. Depending on your content that can be the button that's located all the way at the bottom.

To change (disable) this, sometimes undesirable, behavior you can set the autofocus Dojo attribute to false:

<xe:dialog
    id="dialog1">

    <xe:this.dojoAttributes>
        <xp:dojoAttribute
            name="autofocus"
            value="false">
        </xp:dojoAttribute>
    </xe:this.dojoAttributes>

   ....

Answer 2

The bootstrap modal dialog will automatically give focus to the first element it finds in the dialog that can take focus. In your example, the only thing that can take focus is the button at the bottom. If you had another control at the top, like an input or button capable of taking focus, then that would get focus first and you would see the top of the dialog content.

What you could do though is add the property tabindex="-1" to your bottom button. Thus, nothing in the dialog can take focus so it remains at the top upon opening the dialog. However, that may have undesired effects as you can't tab onto the button any more.

You could look into hooking into the shown.bs.modal event of the dialog, and in there send the focus elsewhere, like in this example. See the bootstrap doc too for info on the modal events.