XPages - 부트 스트랩 : 한 줄로 필드 정렬하기

"Search : [field] [button]"유형의 "Boostrap 테마가있는 검색 창을 최신 확장 라이브러리에서 찾을려고 시도하고 있습니다. 모든 컨트롤이 서로 다른 줄에 하나씩 나타나지 않기 때문에 무언가가 누락되었습니다.XPages - 부트 스트랩 : 한 줄로 필드 정렬하기

아직 부트 스트랩 (전화 번호부를 첫 번째 앱으로 사용하므로 검색 기능)에 익숙하지 않습니다. 지금까지 읽은 다양한 게시물을 "form"요소에 스타일을 추가 할 때마다 원하는대로 작업 할 수 없었습니다 ...

다음은 레이블을 표시하는 코드입니다. top, 그 다음 라인의 필드, 그리고 다른 라인의 버튼 :

<xp:panel style="width:400px" > 
    <xp:label value="Recherche :" id="label2" xp:key="label" style="font-weight:bold" styleClass="form-control-static"> 
    </xp:label> 
    <xp:inputText id="searchFor" 
     value="#{sessionScope.searchFor}" styleClass="form-control-static"> 
     <xp:eventHandler event="onkeypress" submit="true" 
      refreshMode="partial" refreshId="PanelMain"> 
     </xp:eventHandler> 
    </xp:inputText> 
    <xp:button value="Reset" id="button1" 
      styleClass="btn btn-primary form-control-static"> 
      <xp:eventHandler event="onclick" submit="true" 
       refreshMode="partial" refreshId="PanelMain"> 
       <xp:this.action><![CDATA[#{javascript:sessionScope.searchFor = null;}]]></xp:this.action> 
      </xp:eventHandler> 
    </xp:button> 
</xp:panel>

무엇이 누락 되었습니까? 볼 수 있듯이 양식 테이블 레이아웃을 사용하지 않습니다. 시도하여 원하는대로 작동하지 않았습니다 ... 심지어 "디스플레이 : 인라인"을 시도했지만 성공하지 못했습니다.

감사

출처

2016-05-31 Ben Dubuc

이 정말 XPages 질문이 아니라 필요한 부트 스트랩 클래스를 적용하는 방법에 대한 자세한. 인라인 양식 예제 (http://getbootstrap.com/css/#forms)를 보셨습니까? 나는 당신의 코드가 생성하는 출력과 비교할 것이다. –

Mark,하지만 그랬지만 XPages 요소를 사용하고 있기 때문에 부트 스트랩 클래스를 다양한 xpages 요소에 통합하는 방법을 알지 못했습니다. Chris가 준 응답에서, 나는 "수동으로"(xpage 내부의 html 코드) 많이해야 할 것 같아요. –

일부 신속하고 더러운 그냥 노크 코드 한 줄에 모두 표시 만 작은 브라우저 창 크기를 조정하면 여러 줄에 놓기 시작한다. 나는 그러나 내 자신의 행과 그리드를 구축, 일부 실제 부트 스트랩 HTML을 사용하고

....

<!-- ROW 1 --> 
<div class="row"> 
<div class="col-lg-4"> 
    <div class="form-group"> 
     <label for="edtName">Name:</label> 
     <xp:inputText id="edtName"> 
      <xp:this.attrs> 
       <xp:attr name="placeholder" value="Name"></xp:attr> 
      </xp:this.attrs> 
     </xp:inputText> 
    </div> 
</div> 

<div class="col-lg-2"> 
<xp:button value="Search" id="btnSearch" styleClass="btn btn-success btn- block btn-tall"> 

<xp:eventHandler event="onclick" submit="true" refreshMode="partial" 
    refreshId="divReset"> 
<xp:this.action><![CDATA[#{javascript: 
var strName:string = getComponent("edtName").getValue(); 
viewScope.searchString = strName 
}]]></xp:this.action> 
</xp:eventHandler></xp:button> 
</div> 
</div>

출처

2016-06-01 10:02:56

XPages - 부트 스트랩 : 한 줄로 필드 정렬하기

답변

관련 문제