日期字段和 BootStrap 扩展库

Question

我有一个非常简单的表格，我正在尝试使用 ExtLib 中的 BootStrap。一切都很好，直到我添加一个日期或时间类型的字段。该字段之后的任何字段都会在设计中关闭。我想要左边的标签和右边的字段。正如您在此示例中看到的那样，一旦显示 "Datum" 字段，"von" 和 "bis" 字段就会关闭（是的，我确实看到 "Jause" 和 "Mittagessen"没有正确对齐，我稍后会看到问题所在:)我已经尝试了所有方法但看不出我的错误。

这是我在 Chrome 中得到的：

这是代码：

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

马克回答了问题，但我似乎无法在评论中找到 "Mark as Answered" 标志！这是他的回答：

我已经复制了您的代码并使用 ExtLib 的 v11 和内置的 Bootstrap3.2.0 主题对其进行了测试。我已将更改为 .将您自己的表单标记添加到 XPage 不是一个好主意。之后它看起来不错：Von und Bis 的渲染与其他标签一样

Answer 2

我已经复制了您的代码并使用扩展库版本 11 和内置 Bootstrap3.2.0 主题对其进行了测试。我已将 <form class="form-horizontal"> 更改为 <div class="form-horizontal">。之后它看起来不错：Von und Bis 的渲染与其他标签一样。

A <form> 始终由 XPages 引擎自动创建，因此您无需自己添加。 Bootstrap 中的 form-horizontal class 不仅限于与表单标签一起使用：它也可以与 <div>.

一起使用

日期字段和 BootStrap 扩展库

Date fields and BootStrap Extension Lib

xpages

xpages-extlib