CODEWITHSUNDEEP
reactjsfluent-uifluentui-react
user989988
user989988

Reputation: 3746

Double scrollbars in Fluent UI React - DetailsList & Modal

<div>
  <Modal
    isOpen={isModalOpen}
    onDismiss={handleCloseModal}
    styles={{main: classNames.modal}}
  >
    <div className={classNames.header}>
      <IconButton
        iconProps={{ iconName: 'Cancel' }}
        ariaLabel={strings.close}
        onClick={handleCloseModal}
      />
    </div>
    <div className={classNames.detailsList}>
    <DetailsList
      columns={columns}
      items={items}
    />
    </div>
  </Modal>
</div>

header: {
    display: 'flex',
    justifyContent: 'flex-end'
},
modal:{
    maxHeight: '80vh', 
    overflowY: 'auto'
},
detailsList: {
    overflowY: 'auto',
    maxHeight: '100%'
}

I see 2 vertical scrollbars - one for detailslist, one for modal. How to update so that it shows one scrollbar

enter image description here

Upvotes: 0

Views: 21

Answers (1)

Davi Gramm
Davi Gramm

Reputation: 1

Try use "height: 100%" instead of "maxHeight: 100%" on .detailsList class.

Upvotes: 0

Related Questions