Search code examples
xpagesxpages-extlib

Date fields and BootStrap Extension Lib

I have a very simple form that I am trying to use BootStrap from the ExtLib with. Everything is fine until I add a field that is of type Date or Time. Any fields after that field are then off in the design. I would like the labels on the left and the fields on the right. As you can see in this example the "von" and "bis" fields are off once the "Datum" field is displayed (yes, I do see that "Jause" and "Mittagessen" are not aligned correctly, I'll see what the problem is there later :) I have tried everything but cannot see my mistake.

Here is what I am getting in Chrome:

enter image description here

And here is the code: 

 <?xml version="1.0" encoding="UTF-8"?>
            <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
                <xp:panel>
                    <xp:this.data>
                        <xp:dominoDocument var="document1" formName="fmTermin"></xp:dominoDocument>
                    </xp:this.data>
                    <div class="panel panel-default">
                        <div class="panel-body">

                            <form class="form-horizontal">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Mitarbeiter_in</label>
                                    <div class="col-sm-10">
                                        <p class="form-control-static">
                                            <xp:text escape="true" id="computedField1">
                                                <xp:this.value><![CDATA[#{javascript:context.getUser().getFullName()}]]></xp:this.value>
                                        </xp:text>
                                    </p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Standort</label>
                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                        <xp:text escape="true" id="computedField2">
                                            <xp:this.value><![CDATA[#{javascript:userName = context.getUser().getFullName();
            @DbLookup(@DbName(), "vwMitarbeiterInNachStandort", userName, 2)}]]></xp:this.value>
                                        </xp:text>
                                    </p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Kind</label>
                                <div class="col-sm-10">
                                    <p class="form-control-static">
                                        <xp:comboBox id="comboBox1" value="#{document1.nachname}" style="width:350px">
                                            <xp:selectItems>
                                                <xp:this.value><![CDATA[#{javascript:userName = context.getUser().getFullName();
            standort = @DbLookup(@DbName(), "vwMitarbeiterInNachStandort", userName, 2);
            kinder = @DbLookup(@DbName(), "vwKindNachStandort", standort, 2);
            kinder
            }]]></xp:this.value>
                                                </xp:selectItems>
                                            </xp:comboBox>
                                        </p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Jause</label>
                                    <div class="col-sm-10">
                                        <xp:checkBox text="Jause" id="checkBox1" value="#{document1.Jause}" checkedValue="1" uncheckedValue="0"
                                            defaultChecked="true"
                                        ></xp:checkBox>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Mittagessen</label>
                                    <div class="col-sm-10">
                                        <xp:checkBox text="Mittagessen" id="checkBox2" value="#{document1.mittagessen}" checkedValue="1" uncheckedValue="0"
                                            defaultChecked="true">
                                        </xp:checkBox>
                                    </div>
                                </div>


                                <div class="form-group">
                                    <xp:label value="Datum" id="label1" for="datum" styleClass="control-label col-sm-2">
                                    </xp:label>
                                    <div class="col-sm-10">
                                        <xp:inputText id="datum" value="#{document1.datum}" defaultValue="#{javascript:@Now()}">
                                            <xp:dateTimeHelper></xp:dateTimeHelper>
                                            <xp:this.converter>
                                                <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
                                            </xp:this.converter>
                                        </xp:inputText>
                                    </div>
                                </div>



                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Von</label>
                                    <div class="col-sm-10">
                                        <xp:inputText id="von" value="#{document1.von}" defaultValue="#{javascript:@Now()}">
                                            <xp:dateTimeHelper></xp:dateTimeHelper>
                                            <xp:this.converter>
                                                <xp:convertDateTime type="time" timeStyle="short"></xp:convertDateTime>
                                            </xp:this.converter>
                                        </xp:inputText>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Bis</label>
                                    <div class="col-sm-10">
                                        <xp:inputText id="bis" value="#{document1.bis}" defaultValue="#{javascript:@Now()}">
                                            <xp:dateTimeHelper></xp:dateTimeHelper>
                                            <xp:this.converter>
                                                <xp:convertDateTime type="time" timeStyle="short"></xp:convertDateTime>
                                            </xp:this.converter>
                                        </xp:inputText>
                                    </div>
                                </div>



                            </form>
                        </div>
                    </div>
                </xp:panel>
            </xp:view>
Solution

  • Mark answered the question but I cannot seem to find the "Mark as Answered" flag in the comment! Here is his answer:

    I've copied your code and tested it with v11 of the ExtLib and the built-in Bootstrap3.2.0 theme. I've changed the to a . Adding your own form tags to an XPage isn't a good idea. After that it looked Ok: Von und Bis were rendered just as the other labels