Question

我有一个非常简单的表单，我试图使用ExtLib中的BootStrap。一切都很好，直到我添加一个Date或Time类型的字段。然后在该设计中关闭该字段之后的任何字段。我想要左边的标签和右边的字段。正如您在本示例中所看到的，一旦显示“基准”字段，“von”和“bis”字段就会关闭（是的，我确实看到“Jause”和“Mittagessen”没有正确对齐，我会看到什么问题是后来:)我已经尝试了一切，但看不到我的错误。

提前感谢你熊属

以下是我在Chrome中获得的内容：

enter image description here

以下是代码：

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

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

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

Answer 2

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

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

日期字段和BootStrap Extention Lib

2 个答案: