CODEWITHSUNDEEP
twitter-bootstrapxpages
user3202168
user3202168

Reputation: 11

Errror with bootstrap, XPages, Date Field and Domino 9

Read on another XPages forum that someone had a problem with the bootstrap, XPages, Date Field and Domino 9. I tested on my server with Domino 9 because i now currently developing in version 8.5.3. It turns out to be true, have you other encountered same problems?

When I try to click on the date field, a warning icon up but it works anyway. I use Dojo Date Field will be the same there.

I use the code u see here, using bootstrap and JS not plugin. When a open this on server 8.53 all works correct. But when i open it with sam code on server 9.0.1 the date field are corrupt both in UI and function. But they work if a go further. Edit Box and Combo Box work perfect on both servers.

Same result on windows and linux.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex"
style="margin-left:25.0px;margin-top:15.0px">

<xp:label value="Core Control - Date Time Picker" id="label1"
    style="font-weight:bold">
</xp:label>
<xp:br></xp:br>
<xp:inputText id="inputText1" value="#{viewScope.sDate}">
    <xp:dateTimeHelper id="dateTimeHelper1"></xp:dateTimeHelper>
    <xp:this.converter>
        <xp:convertDateTime type="date"></xp:convertDateTime>
    </xp:this.converter>
    <xp:eventHandler event="onchange" submit="true"
        refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:viewScope.sDate}]]></xp:this.action>
    </xp:eventHandler>
</xp:inputText>
&#160;<xp:text escape="true" id="computedField1"
    value="#{viewScope.sDate}">
</xp:text>
<xp:br></xp:br>
<xp:br></xp:br>

<xp:label value="Dojo Form - Date Text Box" id="label2"
    style="font-weight:bold">
</xp:label>
<xp:br></xp:br>
<xe:djDateTextBox id="djDateTextBox1"
    value="#{viewScope.sDojoDate}">
    <xp:eventHandler event="onChange" submit="true"
        refreshMode="complete">
        <xe:this.action><![CDATA[#{javascript:viewScope.sDojoDate}]]></xe:this.action>
    </xp:eventHandler>
</xe:djDateTextBox>

&#160;<xp:text escape="true" id="computedField2"
    value="#{viewScope.sDojoDate}">
</xp:text>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:label value="Edit Box" id="label3" style="font-weight:bold">
</xp:label><xp:br></xp:br>
<xp:inputText id="inputText2"></xp:inputText>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:label value="Combo Box" id="label4" style="font-weight:bold">
</xp:label><xp:br></xp:br>
<xp:comboBox id="comboBox1">
    <xp:selectItem itemLabel="1"></xp:selectItem>
    <xp:selectItem itemLabel="2"></xp:selectItem>
    <xp:selectItem itemLabel="3"></xp:selectItem>
</xp:comboBox></xp:view>

Upvotes: 0

Views: 246

Answers (1)

Simon O&#39;Doherty
Simon O&#39;Doherty

Reputation: 9349

The issue is with the Bootstrap theme (not evident above, but I have a test database from elsewhere with this XSP code). If you change the theme to OneUI then you no longer get truncation in the calendar field and the icons work as expected.

You will need to talk to the creators of that theme to get it fixed.

Upvotes: 0

Related Questions