Bootstrap4Xpages Forms: Layout in 'read mode' not aligned

Question

I'm using Domino 9.0.1 and have managed to install correctly the Bootstrap Library 1.0.0.201403171254.

I am now trying to use the Bootstrap Form for my application (a very simple CRUD with edit and delete). I have inspired myself with the code from the 'form' XPage in the Bootstrap4XPages-Demos database.

As far as I can tell, there are some controls that have been 'bootstrapified' and some others where you have to surround your Xpages tag with a div with the bootstrap class you're looking for - and I am not sure where this is documented (if at all).

The issue I have now is that my 'form' doesn't align nicely when in read mode

enter image description here

but well when in edit mode

enter image description here

Is there an attribute that I am not setting right (I've posted part of the code below) or was Bootstrap4Xpages never designed with this in mind (i.e. I will have to do separate versions of the markup for 'read' mode and 'edit' mode)?

I'm also suspecting that I am stuck in my Notes Client development mode of thinking, i.e. read mode, edit mode, with old ideas for the UI, so if you have a better alternative please tell me!

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
    <xp:dominoDocument
        var="document1"
        formName="Kurs"
        computeWithForm="onsave">
    </xp:dominoDocument>
</xp:this.data>
<div
    class="row">
    <div class="form-horizontal">

        <div class="form-group">
            <xp:label
                value="Titel:"
                id="label1"
                for="titel1"
                styleClass="control-label col-sm-2">
            </xp:label>
            <div
                class="col-sm-10">
                <xp:inputText
                    value="#{document1.Titel}"
                    id="inputText1"
                    required="true">
                    <xp:this.validators>
                        <xp:validateRequired
                            message="Geben Sie bitte einen Titel ein"></xp:validateRequired>
                    </xp:this.validators>
                </xp:inputText>
            </div>
        </div>

This is the markup in read mode:

<div class="form-group">
    <label id="view:_id1:_id2:_id5:label1" for="view:_id1:_id2:_id5:titel1" class="control-label col-sm-2">Titel:</label>
    <div class="col-sm-10">
        <span id="view:_id1:_id2:_id5:inputText1">Thailändische Küche 1</span>
    </div>
</div>

and the markup in edit mode:

<div class="form-group">
    <label id="view:_id1:_id2:_id5:label1" for="view:_id1:_id2:_id5:titel1" class="control-label col-sm-2">Titel:</label>
    <div class="col-sm-10">
        <input type="text" value="Thailändische Küche 1" id="view:_id1:_id2:_id5:inputText1" name="view:_id1:_id2:_id5:inputText1" aria-required="true" class="form-control">
    </div>
</div>

Oliver Busse Oliver Busse · Accepted Answer · 2014-06-01T20:02:05

Bootstrap forms are IMHO not intended to have labels beside the form controls but above. So if you want to layout them both with the col-sm-* classes I'd suggest you to wrap them in divs with that classes or even tables. Also make sure you use the right classes for e.g. a desktop app. The col-sm-* classes are for small resolutions. Add the col-lg-* classes as well as they are designed for the higher resolutions. BTW: to solve the issue with the richtext editor looking like crap have a look here:

http://mardou.dyndns.org/hp.nsf/blogpost.xsp?documentId=BC2

or for anything else "bootstrap"-ed http://mardou.dyndns.org/hp.nsf/search.xsp?query=bootstrap

Bootstrap4Xpages Forms: Layout in 'read mode' not aligned

2 Answers