Make My Questionnaire Responsive

0
votes

I've programmed xPages for awhile, but this is the first time I'm using Bootstrap and making the xPage responsive.

I'm using Bootstrap 4 with Domino 9.0.1 and ExtLib Release 9.0.1 (20160428). My xPage includes a custom control which contains an Application Layout with 3 tables, 1 of which has 4 columns (which needs to be responsive).

My xPage is not responsive and I'm not sure why this is. I've looked through documentation and other questions on all sites and I have a few questions: 1. If the configuration on my Application Layout is Responsive Bootstrap Configuration, and my Application Theme is Bootstrap4 isn't that all I need?
2. I've tried putting styleClass="table-responsive" in a div surrounding each table. Do I also need to use the media queries? If so, why is the bootstrap configuration called "responsive"?

Here is what is in my xsp properties:

xsp.ajax.renderwholetree=false
xsp.client.script.radioCheckbox.ie.onchange.trigger=early-onclick
xsp.persistence.mode=fileex
xsp.resources.aggregate=true
xsp.theme=Bootstrap4
xsp.error.page.default=true
xsp.library.depends=com.ibm.xsp.extlib.library,com.ibm.xsp.extlibx.library
org.openntf.domino.xsp=godmode,marcel,khan,bubbleExceptions
xsp.min.version=9.0.1
xsp.compress.mode=gzip-nolength
xsp.html.page.encoding=utf-8
xsp.html.doctype=html
xsp.html.meta.contenttype=true

And here is part of what's in my custom control (minus the labels and fields in the 4 columned table):

<?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"
    >
    <xp:this.data>
        <xp:dominoDocument
            var="document1"
            formName="ApplicationForm">
        </xp:dominoDocument>
    </xp:this.data>
        <div class="table-responsive">
    <xp:table
        border="3"
        cellspacing="0"
        cellpadding="0">
        <xp:tr>
            <xp:td>
                <xe:applicationLayout id="applicationLayout1">
                    <xe:this.configuration>
                        <xe:bootstrapResponsiveConfiguration
                            banner="false"
                            legal="false">
                        </xe:bootstrapResponsiveConfiguration>
                    </xe:this.configuration>
                    <xp:this.facets>
                        <xp:div
                            xp:key="MastHeader"
                            align="center"
                            styleClass="table-responsive">
                            <xp:table
                                border="0"
                                cellspacing="0"
                                cellpadding="0"
                                styleClass="table-responsive">
                                <xp:tr>
                                    <xp:td>

BLA BLA BLA 

<xp:div
    align="center"
    styleClass="table-responsive">
    <xp:table
    border="0"
    cellspacing="0"
    cellpadding="0">
      <xp:tr>
        <xp:td>
           <xp:div xp:key="Questionnaire">
             <div class="table-responsive">
                <xp:callback
                    facetName="facet_1"
                    id="callback1">
                </xp:callback>
                    <xp:table
                        border="0"
                        cellspacing="0"
                        cellpadding="0"
                        styleClass="table">
                    <xp:tr>
                        <xp:td style="width:10%">                               
                        </xp:td>
                        <xp:td style="width:40.0%">         
                        </xp:td>
                        <xp:td style="width:10%">
                        </xp:td>
                        <xp:td>                 
                        </xp:td>
                        </xp:tr>
                    </xp:table>
                </div>
            </xp:div>
        </xp:panel>
    </xe:applicationLayout>
        </xp:td>
        </xp:tr>
    </xp:table>
    </div>
</xp:view>

Any clarification would be much appreciated.

3
twitter-bootstrapxpagesresponsive
"Create responsive tables by adding .table-responsive to any .table ..." .table-responsive needs to be used in conjunction with .table class. – Aquila Sagitta
I have placed table responsive in each of the div classes and table in each of the table classes according to the CSS bootstrap instructions and there is still no change. I have also removed the application layout itself because it didn't seem to be helping with the responsiveness. I'm going to try adding divs for each of the rows as Howard suggested. If there are any other suggestions you have, I'm open to them. – user3822341

3 Answers

0
votes

As Aquila said, you need to also style the table.

I always add the divs for the rows as well, not sure if that matters. The applicationlayout itself will be responsive but it is up to you to supply all the css and html for the rows, col-spans (or whatever BS 4 uses), etc.

I usually never use the appLayout anyway... The navbar works well. Learn the proper html and css and make sure your page is outputting what a proper bootstrap page should have.

0
votes

I'm not sure ExtLib 17 is designed for Bootstrap 4. 9.0.1 FP8 (equivalent to ExtLib 17) provides only Bootstrap 3.3.7. Bootstrap is not just styling, it's also HTML layout, so even applying the CSS may not work as expected, because you may need different renderers, to emit different HTML.

0
votes

Rather than modify all existing tables to use bootstrap styling etc, you could set something in your theme. For example, I use the below to have all my tables use the row hover/background colour change.

<control>
    <name>DataTable.ViewPanel</name>
    <property>
        <name>dataTableStyleClass</name>
        <value>table table-hover</value>
    </property>
</control>