Machen Sie meinen Fragebogen Responsive

Question

Ich habe xPages für eine Weile programmiert, aber das ist das erste Mal, dass ich Bootstrap benutze und die xPage reagiert.

Ich verwende Bootstrap 4 mit Domino 9.0.1 und ExtLib Release 9.0.1 (20160428). Mein xPage enthält ein benutzerdefiniertes Steuerelement, das ein Anwendungslayout mit 3 Tabellen enthält, von denen 1 4 Spalten hat (die reaktionsfähig sein müssen).

Mein xPage reagiert nicht und ich bin nicht sicher, warum das ist. Ich habe Dokumentation und andere Fragen auf allen Seiten durchgesehen und ich habe ein paar Fragen: 1. Wenn die Konfiguration auf meiner Anwendung Layout ist Responsive Bootstrap-Konfiguration, und meine Anwendung Theme ist Bootstrap4 ist nicht das alles ich brauchen?
2. Ich habe versucht styleClass = "table-responsive" in einem div um jede Tabelle. Muss ich auch die Medienabfragen verwenden? Wenn ja, warum wird die Bootstrap-Konfiguration "Responsive" genannt?

Hier ist, was in meinen xsp Eigenschaften ist:

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 

Und hier ist ein Teil von dem, was in meiner benutzerdefinierten Kontrolle ist (minus die Beschriftungen und Felder in der 4 columned Tabelle):

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

Jede Klärung würde sehr geschätzt werden.

Answer 1

Wie Aquila sagte, müssen Sie auch den Tisch stylen.

Ich füge immer auch die divs für die Zeilen hinzu, nicht sicher, ob das wichtig ist. Das Applicationlayout selbst ist reaktionsbereit, aber es liegt an Ihnen, alle css und html für die Zeilen, col-spans (oder was auch immer BS 4 verwendet) usw. zu liefern.

Normalerweise benutze ich das appLayout sowieso nie ... Die Navbar funktioniert gut. Erlernen Sie den korrekten HTML und CSS und stellen Sie sicher, dass Ihre Seite ausgibt, was eine richtige Bootstrap-Seite haben sollte.

Answer 2

Ich bin nicht sicher, ExtLib 17 ist für Bootstrap 4 konzipiert. 9.0.1 FP8 (entspricht ExtLib 17) bietet nur Bootstrap 3.3.7. Bootstrap ist nicht nur Styling, es ist auch HTML-Layout, so funktioniert sogar das Anwenden der CSS möglicherweise nicht wie erwartet, da Sie möglicherweise andere Renderer benötigen, um verschiedene HTML zu emittieren.

Answer 3

Anstatt alle vorhandenen Tabellen zu ändern, um Bootstrap-Stile usw. zu verwenden, können Sie etwas in Ihrem Design festlegen. Zum Beispiel benutze ich das Folgende, damit alle meine Tabellen den Zeilen-Hover/Hintergrund-Farbwechsel verwenden.

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