如何限制我的反应组件的大小并增加滚动?

I have dynamic number of buttons I need to render depending on the user. During this dialog box, they need to select one of the options and submit. my goal is to make it look like this, showing at most 4 buttons, with the ability to scroll through the rest:

根据用户的不同，我需要呈现动态数量的按钮。在这个对话框中，他们需要选择一个选项并提交。我的目标是让它看起来像这样，最多显示4个按钮，并能滚动其余的按钮:

However, if there are more than 4 buttons available, the buttons go offscreen and become impossible to access, even if the user scrolls down the page outside of the dialog box:

但是，如果有超过4个按钮可用，这些按钮就会从屏幕上消失，无法访问，即使用户滚动到对话框外的页面:

I would like to restructure my code so that I have a react component limited in size to only show 4 at once, ensuring the entire screen stays on the page.

我想重构我的代码，这样我就有了一个大小有限的react组件，一次只能显示4个，确保整个屏幕都在页面上。

I have stored my code at this JSFiddle: https://jsfiddle.net/connorcmu/f01xhsat/1/

我已经将代码存储在这个JSFiddle: https://jsfiddle.net/connorcmu/f01xsat/1/

renderDialog and renderButtons are the relevant sections here:

renderDialog和renderButtons是这里的相关部分:

renderButtons: function() {
var accountList = this.props.accounts;


var buttonList = accountList.map(function(account) {
  return (<div className='col-sm-6'>
    <GEMSelector classname='leftButtonContainer' header={account.organization_name} stat={account.tier} contacts={account.subscriber_count+' / '+account.max_subscribers+' Contacts'} credits={account.mailing_credits + ' Credits'}></GEMSelector>
  </div>);
});
var accountsGrid =
  (<div className="container-fluid">
    <div className="row">
      <div className='col-sm-6'>
        <GEMSelector classname='leftButtonContainer' header='FRANKS CASINO' stat='Create new account' contacts='' credits='' specialpadding={true}></GEMSelector>
      </div>
      {buttonList}
    </div>
  </div>);

return {accountsGrid};
  }

Also, if there is anyway to make the dialog box bigger so that the submit buttons just don't float like that, that would be very helpful too.

另外，如果要让对话框变得更大，那么提交按钮就不会像那样浮动，这也很有帮助。

1 个解决方案

#1

From the code it looks like you need to add a new class for the className="row" in accountsGrid .

从代码来看，您似乎需要为accountsGrid中的className="row"添加一个新的类。

var accountsGrid =
    (<div className="container-fluid">
    <div className="row selection-area">

See that a new class is added 'selection-area' and add overflow with width twice the height of the 'GEMSelector'

要注意，添加了一个新的类“selection-area”，并添加宽度是“GEMSelector”高度两倍的溢出

.selection-area{
     overflow: scroll;
     height: 300px;
}

#1