javascript - How do I limit the size of my React component and add scrolling? - Stack Overflow

admin管理员组

文章数量:1310099

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:

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

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

I have stored my code at this JSFiddle: /

renderDialog and renderButtons are the relevant sections here:

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


var buttonList = accountList.map(function(account) {
  return (<div className='col-sm-6'>
    <GEMSelector classname='leftButtonContainer' header={accountanization_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.

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:

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

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

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

renderDialog and renderButtons are the relevant sections here:

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


var buttonList = accountList.map(function(account) {
  return (<div className='col-sm-6'>
    <GEMSelector classname='leftButtonContainer' header={accountanization_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.

• javascript
• jquery
• css
• twitter-bootstrap
• reactjs

Share Improve this question Follow asked Sep 1, 2015 at 21:42 Connor O'DohertyConnor O'Doherty 38522 gold badges55 silver badges1919 bronze badges 1

• is there a reason you can't just do this in CSS? add a max-height and overflow-y: auto to the grid container – Jakemmarsh Commented Sep 2, 2015 at 0:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Had the same problem in React JS. I would add a container class, like:

<div className="row container">
    content
</div>

and then add styling to that container class:

.container {
   overflow-y: scroll;
   height: 100vh;
}

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

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{
     overflow: scroll;
     height: 300px;
}

本文标签： javascriptHow do I limit the size of my React component and add scrollingStack Overflow