react-bootstrap on Google Chrome : the horizontal scrollbar of my div shifts a little to the left when it is on the far right when I close my modal

huangapple
go评论104阅读模式
英文:

react-bootstrap on Google Chrome : the horizontal scrollbar of my div shifts a little to the left when it is on the far right when I close my modal

问题

以下是您要翻译的内容：

"Has someone already had this problem? Do I have to change the library for the modals?
I just want my horizontal scrollbar in my div to stay on the right when I close my modal. However, the scrollbar shifts a little to the left. This problem only happens on Google Chrome."

"我之前有人遇到这个问题吗？我是否需要更改模态框的库？
我只是希望在关闭模态框时，我的 div 中的水平滚动条保持在右侧。然而，滚动条会稍微向左移动。这个问题只发生在 Google Chrome 上。"

"ReusableModal :"

"可重复使用的模态框："

"what I expect is to keep the position of the horizontal scrollbar of my center div all the way to the right when I close the modal"

"我期望的是在关闭模态框时，保持中心 div 的水平滚动条位置一直在最右边。"

英文:

Has someone already had this problem? Do I have to change the library for the modals?
I just want my horizontal scrollbar in my div to stay on the right when I close my modal. However, the scrollbar shifts a little to the left. This problem only happens on Google Chrome

  1.               <div style={{ overflowY: 'auto', overflowX: 'hidden', padding: '14px' }}>
  2. {residents.map((x, i) => {
  3. return (
  4. <div key={i}>
  5. <div key={i} className="box">
  6. <Row>
  7. <div className="add-residents-delete-inputs">
  8. {residents.length !== 1 &&
  9. <Button variant="danger" onClick={() => handleRemoveClick(i)}>x</Button>}
  10. </div>
  11. <Col
  12. style={{
  13. marginLeft: '30px'
  14. }}>
  15. <Form.Group controlId="validationCustom01">
  16. <InputGroup style={{ width: 'fit-content' }} hasValidation>
  17. <Form.Control
  18. required
  19. className="ml10"
  20. name="lastname"
  21. placeholder="Nom *"
  22. value={x.lastname}
  23. onChange={e => handleInputChange(e, i)} />
  24. <Form.Control.Feedback type="invalid">
  25. <small> {error} </small>
  26. </Form.Control.Feedback>
  27. </InputGroup>
  28. </Form.Group>
  29. </Col>
  30. <Col
  31. style={{
  32. marginLeft: '46px'
  33. }}>
  34. <Form.Group controlId="validationCustom02">
  35. <InputGroup style={{ width: 'fit-content' }} hasValidation>
  36. <Form.Control
  37. required
  38. name="firstname"
  39. placeholder="Prénom *"
  40. value={x.firstname}
  41. onChange={e => handleInputChange(e, i)} />
  42. <Form.Control.Feedback type="invalid">
  43. <small> {error} </small>
  44. </Form.Control.Feedback>
  45. </InputGroup>
  46. </Form.Group>
  47. </Col>
  48. <Col
  49. style={{
  50. marginLeft: '45px'
  51. }}>
  52. <FormGroup controlId="validationCustom03">
  53. <Form.Select
  54. required
  55. name="gender"
  56. placeholder="Genre"
  57. value={x.gender}
  58. style={{ backgroundColor: "#5CB2C4", color: "white" }}
  59. onChange={e => handleInputChange(e, i)}>
  60. <option value="M">Homme</option>
  61. <option value="F">Femme</option>
  62. </Form.Select>
  63. </FormGroup>
  64. </Col>
  65. <Col
  66. style={{
  67. marginLeft: '46px'
  68. }}>
  69. <FormGroup controlId="validationCustom04">
  70. <Form.Select
  71. name="texture"
  72. placeholder="Texture"
  73. defaultValue={x.texture}
  74. onChange={e => handleInputChange(e, i)}>
  75. <option value="">Entier</option>
  76. <option value="chopped">Haché</option>
  77. <option value="mixed">Mixé</option>
  78. </Form.Select>
  79. </FormGroup>
  80. </Col>
  81. <Col
  82. style={{
  83. marginLeft: '42px'
  84. }}>
  85. <FormGroup controlId="validationCustom05">
  86. <Form.Control
  87. required
  88. name="diet"
  89. placeholder="Protocole Alimentaire"
  90. style={{ backgroundColor: "white", color: "black" }}
  91. // We can also use defaultValue ={residentInputValue[i].profil} for example.
  92. defaultValue={x.diet}
  93. onChange={e => handleInputChange(e, i)} />
  94. </FormGroup>
  95. </Col>
  96. <Col
  97. style={{
  98. marginLeft: '46px'
  99. }}>
  100. <Form.Group controlId="validationCustom02">
  101. <InputGroup style={{ width: 'fit-content' }} hasValidation>
  102. <Form.Control
  103. style={{ backgroundColor: 'white', color: 'black' }}
  104. name="residence_location"
  105. placeholder="Service"
  106. value={x.residence_location}
  107. onChange={e => handleInputChange(e, i)} />
  108. </InputGroup>
  109. </Form.Group>
  110. </Col>
  111. <Col
  112. style={{
  113. marginLeft: '102px'
  114. }}>
  115. <FormGroup controlId="validationCustom06">
  116. <Button value={x.aversions.map(aversions => aversions.name)} id={i} variant="success"
  117. onChange={e => handleInputChange(e, i)}
  118. onClick={e => handleOpen(e, i)}>+</Button>
  119. <p>
  120. {residents[i].aversions.map((aversion, index) => {
  121. return (
  122. <span key={index}>
  123. {index === residents[i].aversions.length - 1
  124. ? aversion.name + ' (' + aversion.type + ')' : aversion.name +
  125. ' (' + aversion.type + ')' + ', '}
  126. </span>
  127. );
  128. })
  129. }
  130. </p>
  131. </FormGroup>
  132. </Col>
  133. </Row>
  134. </div>
  135. <ReusableModal sectionRef={sectionRef} btnRef={btnRef} show={showModal} onClose={onClose}
  136. name="aversions"
  137. handleSave={e => handleSave(e, i)} title="Ajout/suppression d'aversions">
  138. <AddAversions sectionRef={sectionRef} aversions={aversions} isCheckedList={isCheckedList}
  139. aversionsList={aversionsList}
  140. onAversionsChange={onAversionsChange} onTypeChange={onTypeChange} residents={residents} />
  141. </ReusableModal>
  142. </div>

ReusableModal :

  1.   return (
  2. <Modal keyboard centered backdrop={false} show={props.show} onHide={handleClose} style={{position: 'fixed'}}>
  3. <Modal.Header closeButton>
  4. <Modal.Title>{props.title}</Modal.Title>
  5. </Modal.Header>
  6. <Modal.Body>{props.children}</Modal.Body>
  7. <Modal.Footer>
  8. <Button variant="secondary" onClick={handleClose}>
  9. Annuler
  10. </Button>
  11. <Button ref={btnRef} variant="primary" onClick={props.handleSave}>
  12. Sauvegarder
  13. </Button>
  14. </Modal.Footer>
  15. </Modal>
  16. );

what I expect is to keep the position of the horizontal scrollbar of my center div all the way to the right when I close the modal

答案1

得分: 0

解决了。我只是把我的模态组件移到了我的 .map() 下面。而不是里面。

英文:

Solved. I just had to move my Modal component under my .map(). Not inside.

huangapple
  • 本文由 发表于 2023年2月23日 20:07:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/75544625.html
  • css
  • javascript
  • modal-dialog
  • react-bootstrap
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定