使我的調查問卷響應

我編寫了xPages一段時間，但這是我第一次使用Bootstrap並使xPage響應。使我的調查問卷響應

我在Domino 9.0.1和ExtLib版本9.0.1（20160428）中使用Bootstrap 4。我的xPage包含一個自定義控件，其中包含一個包含3個表格的應用程序佈局，其中1個包含4列（需要響應）。

我的x頁面沒有響應，我不確定這是爲什麼。我瀏覽過所有網站上的文檔和其他問題，並且我有幾個問題： 1.如果我的應用程序佈局上的配置是響應引導配置，並且我的應用程序主題是Bootstrap4並不是我所有的需要？
2.我試過把styleClass =「table-responsive」放在圍繞每個表格的div中。我是否也需要使用媒體查詢？如果是這樣，爲什麼引導配置稱爲「響應」？

這裏是什麼在我的XSP性質：

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

這裏是什麼在我的自定義控制部分（在零下4列的表格的標籤和字段）：

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

任何澄清將不勝感激。

來源

2017-07-12 Lenni Sauve

「加入。表響應任何。表創建響應表...」 '。表-responsive'需要結合使用以'.table'類。 –

根據CSS引導指令，我已經在每個表類中的每個div類和表中放置了表響應，並且仍然沒有變化。我也刪除了應用程序佈局本身，因爲它似乎沒有幫助響應。正如霍華德所建議的那樣，我會嘗試爲每一行添加div。如果您有任何其他建議，我向他們開放。 –

正如Aquila所說，您還需要設計桌子的樣式。

我總是添加行的div，以及不知道是否重要。應用程序佈局本身將是響應式的，但它是由你提供的行，列（或任何BS 4使用）等所有的CSS和HTML等。

我通常永遠不會使用appLayout ...導航欄運行良好。學習正確的HTML和CSS，並確保你的頁面正在輸出一個合適的引導頁面應該有。

來源

2017-07-12 21:23:26 Howard

我不確定ExtLib 17是否爲Bootstrap 4設計。9.0.1 FP8（相當於ExtLib 17）只提供Bootstrap 3.3.7。 Bootstrap不僅僅是樣式，它也是HTML佈局，所以即使應用CSS也可能無法按預期工作，因爲您可能需要不同的渲染器來發布不同的HTML。

來源

2017-07-12 22:26:16

謝謝你的信息保羅。我選擇了Bootstrap3。這並沒有改變響應的任何內容，但現在我將嘗試上面的建議，但沒有這個潛在問題。 –

我已經使用了上述所有 - 更改爲bootstrap 3，更新了表格和表格響應，在我的每個行周圍添加了div，併爲它們分配了行容器流體，甚至在每個行div中添加了另一個div用class =「col-xs-12 col-lg-3 col-md-3 col-sm-6」，當我使用設備模擬器在谷歌瀏覽器上測試它時，它仍然不響應。 –

我忘了提及 - 字體也不會變小，我從Bootstrap文檔中瞭解到這應該會自動發生。沒有？ –

而不是修改所有現有的表來使用引導樣式等，你可以在你的主題中設置一些東西。例如，我使用下面的內容來讓我的所有表格都使用行懸停/背景顏色更改。

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

來源

2017-07-13 16:09:50

謝謝克里斯。我使用引導程序，因爲我認爲它將刪除輸入所有CSS代碼的需要 - 顯然我錯了:-) –

使我的調查問卷響應

回答

相關問題