Я создал 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
перед открытием модального всплывающего окна, между таблицами появляется дополнительный пробел ... и иногда после последний стол Закрытие элемента проверки и обновление экрана решит проблему ...
Может кто-нибудь подсказать мне, почему это происходит, и как мне выйти из этой ситуации. Любая помощь будет оценена.