Модальное всплывающее окно иногда показывает дополнительное пространство и вертикальную полосу прокрутки - PullRequest
0 голосов
/ 13 января 2020

Я создал 6 динамических c Bootstrap таблиц внутри Modal Всплывающее окно в ReactJS. Количество таблиц, которые будут отображаться внутри Modal, полностью зависит от динамических данных c. Есть одна странная ситуация, которая воспроизводится с перерывами, иногда всплывающее окно Modal показывает лишние пробелы и вертикальную полосу прокрутки без необходимости. Если я обновляю окно, то оно работает нормально.

    let subModalDialogStyles = {
            base: {
              bottom: -250,
              transition: 'bottom 0.4s',
              width: '70%'
            },
            open: {
              bottom: 0
            }
      };

          <Modal isOpen={this.state.isModalOpen} onRequestHide={this.hideModal} dialogStyles={subModalDialogStyles}>
              <ModalHeader>
              <h1 className="textAlign title-modal" >Problems in model {stmt}</h1>
              </ModalHeader>
              <ModalBody>
              <div className="form-horizontal">
              <div className="form-group">
              <div className="col-md-12 scroll" style={{maxHeight: "calc(100vh - 210px)" , overflowY: "auto"}}>
                {this.state.attrArray.length !=0 ? <h4 style={{backgroundColor: "yellow"}}>Problems in Attributes</h4> : ""}
                <BootstrapTable style={{color: this.state.colorAttr}}
                data={this.state.attrArray}
                headers={this.props.state.options.headers}
                columns={attrCol}>
                </BootstrapTable>
                {this.state.restArray.length != 0 ? <h4 style={{backgroundColor: "yellow"}}>Problems in Restrictions</h4> : ""}
                <BootstrapTable style={{color: this.state.colorRes}}
                data={this.state.restArray}
                headers={this.props.state.options.headers}
                columns={resCol}>
                </BootstrapTable>
                {this.state.crArray.length != 0 ? <h4 style={{backgroundColor: "yellow"}}>Problems in Coverage Requirements</h4> : ""}
                <BootstrapTable style={{color: this.state.colorCr}}
                data={this.state.crArray}
                headers={this.props.state.options.headers}
                columns={crCol}>
                </BootstrapTable>
                {this.state.negCombArray.length != 0 ? <h4 style={{backgroundColor: "yellow"}}>Problems in Negative Combinations</h4> : ""}
                <BootstrapTable style={{color: this.state.colorNegComb}}
                data={this.state.negCombArray}
                headers={this.props.state.options.headers}
                columns={negCombCol}>
                </BootstrapTable>
                {this.state.triggersArray.length != 0 ? <h4 style={{backgroundColor: "yellow"}}>Problems in Test Description Triggers</h4> : ""}
                <BootstrapTable style={{color: this.state.colorTriggers}}
                data={this.state.triggersArray}
                headers={this.props.state.options.headers}
                columns={triggersCol}>
                </BootstrapTable>
                {this.state.idArray.length != 0 ? <h4 style={{backgroundColor: "yellow"}}>Problems in Model Identification</h4> : ""}
                <BootstrapTable style={{color: this.state.colorId}}
                data={this.state.idArray}
                headers={this.props.state.options.headers}
                columns={idCol}>
                </BootstrapTable>
                </div></div></div>
              </ModalBody>
              <ModalFooter>
                <button className="image-button" onClick={this.hideModal}>
                <img className="icons-small" src={require("../../images/cancel-icon.png")} />
                  Close
                </button>
              </ModalFooter>
            </Modal>

Иногда, если я открываю Inspect Element перед открытием модального всплывающего окна, между таблицами появляется дополнительный пробел ... и иногда после последний стол Закрытие элемента проверки и обновление экрана решит проблему ...

Может кто-нибудь подсказать мне, почему это происходит, и как мне выйти из этой ситуации. Любая помощь будет оценена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...