Date fields and BootStrap Extension Lib - xpages

Question

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:
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>

Answer 1

I've copied your code and tested it with version 11 of the Extension Library and the built-in Bootstrap3.2.0 theme. I've changed the <form class="form-horizontal"> to a <div class="form-horizontal">. After that it looked Ok: Von und Bis were rendered just as the other labels.
A <form> is always created by the XPages engine automatically, so you don't need to add that yourself. The form-horizontal class in Bootstrap isn't restricted for use with a form tag only: it can be used just as well with a <div>.

Answer 2

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