ReactBootstrapグリッドのRowSpanが機能しない

Question

ここでは、コントロールのイメージが表示されています。これは、rowSpanが動作していないことがわかり、2番目の行が最初の行の下で開始することがわかります。基本役割の選択を役割名入力の直下にしたいと思います。

私はあなたが上記を参照できるようROWSPAN = {5}属性を追加しようとしたが、それは何もしませんでした。私はまた、行スパンと属性のケースの他のバリエーションを試しました。

回避策として、親テーブルを追加し、最初の列にこのテーブルを格納し、2番目の列に説明のテキストエリアを格納することを検討していますが、可能であれば、これをいくつかの種類のrowSpan機能で実現したいと考えています。

ご協力いただければ幸いです。

私はReactBootstrapグリッドコントロールを持っていますが、説明の列を追加してrowSpanを5にして他の列がこの列に並んでいて、この行の後に開始しません。

    <ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}> 
         <ReactBootstrap.Row> 
          <ReactBootstrap.Col sm={6} md={6}> 
           <Input label="Name:" ref={(r) => this.name= r} className={this.state.errors.name} defaultValue={object.name} onChange={ value => this.onFieldChange("name", value) } maxLength="50" /> 
          </ReactBootstrap.Col> 
          <ReactBootstrap.Col sm={6} md={6} rowSpan={5} > 

          <div className="label">Description:</div> 
          <textarea ref="notes" rows="15" onChange={ this.onChangeDescription } style={{ width: "99%" }} disabled={ object.isDeleted }> 
           { object.description } 
          </textarea> 

         </ReactBootstrap.Col> 
         </ReactBootstrap.Row> 

Answer 1

「React Bootstrap Grid Column」では、RowSpanはサポートされていません。誰かが別のものを見つけた場合、またはこの機能が将来追加された場合は、下記の更新された回答をお知らせください。

私の回避策は、元のグリッドに2つの列を追加することでした。最初の列には、通常、最初の列に表示されるすべてのデータと1列目と2列目のグリッドがあります。行のテキスト領域。

これは達成されましたが、最初の列の内側のコントロールの幅に問題があることがわかりました。手動で幅の値を設定しました。ここで

私のコードです。

<ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}> 
 
<ReactBootstrap.Row> 
 
\t <ReactBootstrap.Col sm={6} md={6}> 
 

 
\t \t \t <ReactBootstrap.Grid > 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t <Input label="Role Name:" ref={(r) => this.roleName = r} className={this.state.errors.roleName} width="300" defaultValue={role.name} onChange={ value => this.onFieldChange("roleName", value) } maxLength="50" /> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t <div className="label" >Base Role:</div> 
 
\t \t \t \t \t \t \t <Select ref={(r) => this.baseRole = r} className={this.state.errors.baseRole} style={{ width: "300px" }} options={baseRoles} onChange={this.onChangeBaseRole} value={ role.baseRoleId } clearable={false} backspaceRemoves={false} /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t <div className="label" >Startup Module:</div> 
 
\t \t \t \t \t \t \t <Select ref={(r) => this.defaultModule = r} className={this.state.errors.defaultModule} style={{ width: "300px" }} options={defaultModules} onChange={this.onChangeDefaultModule} value={ role.moduleId } clearable={false} backspaceRemoves={false} /> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t \t \t <Input label="Allow Company Access" type="checkbox" ref={(r) => this.companyAccess = r} className={ this.state.errors.companyAccess} checked={ role.companyAccess} onChange={ value => this.onFieldChange("companyAccess", value) } /> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t \t <ReactBootstrap.Row> 
 
\t \t \t \t \t <ReactBootstrap.Col sm={6} md={6}> 
 
\t \t \t \t \t \t \t \t <Input label="Restrict Application Access" type="checkbox" ref={(r) => this.applicationGrant = r} className={ this.state.errors.applicationGrant} checked={ role.applicationGrant} onChange={ value => this.onFieldChange("applicationGrant", value) } /> 
 
\t \t \t \t \t </ReactBootstrap.Col> 
 
\t \t \t \t </ReactBootstrap.Row> 
 
\t \t \t </ReactBootstrap.Grid> 
 
\t \t </ReactBootstrap.Col> 
 
\t 
 
\t \t <ReactBootstrap.Col sm={6} md={6} RowSpan={5} > 
 

 
\t \t \t <div className="label">Description:</div> 
 
\t \t \t <textarea ref="notes" rows="15" onChange={ this.onChangeNotes } style={{ width: "99%" }} disabled={ role.isDeleted }> 
 
\t \t \t \t { role.description } 
 
\t \t \t </textarea> 
 
\t \t </ReactBootstrap.Col> 
 
\t </ReactBootstrap.Row> 
 

 
</ReactBootstrap.Grid> 
 

 
        

Answer 2

オクラホマので、「基本的なブートストラップ」でこれを達成するための基本的な方法は、それが反応し、ブートストラップをするために変換しようと

<div class='row'> 
    <div class="hidden-xs col-sm-6"> 
     <div>Hi man</div> 
     <div>after the text area</div> 
    </div> 
    <div class="hidden-sm col-xs-12"> 
     <div>Hi man</div> 
    </div>   
    <div class="col-sm-6"> 
     <textarea rows="5"></textarea> 
    </div> 
    <div class="hidden-sm col-xs-12"> 
     <div>after the text area</div> 
    </div> 
</div> 

は（テストしていない以下のコード）を与えるだろう

<ReactBootstrap.Row> 
    <ReactBootstrap.Col className="hidden-xs" sm={6}> 
     <div>Hi</div> 
     <div>after the text area</div> 
    </ReactBootstrap.Col> 
    <ReactBootstrap.Col className="hidden-sm"> 
     <div>Hi man</div> 
    </ReactBootstrap.Col>   
    <ReactBootstrap.Col sm={6}> 
     <textarea rows="5"></textarea> 
    </ReactBootstrap.Col> 
    <ReactBootstrap.Col className="hidden-sm"> 
     <div>after the text area</div> 
    </ReactBootstrap.Col> 
</ReactBootstrap.Row> 

ここでコードの複製を見ることができるので、おそらく「ハイマン」と「テキスト領域の後」のコンテンツを構築する機能が必要になるでしょう。

Answer 3

行が正しく動作しています。単純な事実は、記述列の高さが行全体をその高さにすることです。次の行がこれの下に入ります。必要な目的を達成するには、基本ロール、起動モジュールを挿入し、ロールの名前が入っている同じ列に会社のアクセス入力を許可して制限し、別々の行には入れないようにします。

<ReactBootstrap.Grid style={{marginTop: 10}} fluid={true}> 
        <ReactBootstrap.Row> 
         <ReactBootstrap.Col sm={6} md={6}> 
          <Input label="Name:" ref={(r) => this.name= r} className={this.state.errors.name} defaultValue={object.name} onChange={ value => this.onFieldChange("name", value) } maxLength="50" /> 

// insert your base role, startup module, allow and restric company access inputs here 

         </ReactBootstrap.Col> 
         <ReactBootstrap.Col sm={6} md={6} rowSpan={5} > 

         <div className="label">Description:</div> 
         <textarea ref="notes" rows="15" onChange={ this.onChangeDescription } style={{ width: "99%" }} disabled={ object.isDeleted }> 
          { object.description } 
         </textarea> 

        </ReactBootstrap.Col> 
        </ReactBootstrap.Row> 

共有編集フラグ