1

I'm rendering a modal component, and I'm getting this back : image

why's the xClose button looks like this?

Here's my modal component :

import { Button, Modal } from 'react-bootstrap'

const TodoPopup = (props : {show : boolean, onHide : () => void} ) => {
    return (
        <Modal
      {...props}
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          This is a modal example
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
    );
};

export default TodoPopup;

I copied and pasted from documentation here : react-bootstrap documentation

generated spans inside close button class

8
  • You might be missing CSS?
    – Houssam
    Oct 17, 2021 at 18:51
  • I've added the import, but still same results Oct 17, 2021 at 18:57
  • any help please? Oct 17, 2021 at 19:14
  • I have just tried using the example with a button to open the modal from the documentation and I can't reproduce the issue. Can you inspect the "X" button on your browser and see if the .btn-close class had the correct CSS properties?
    – Houssam
    Oct 17, 2021 at 19:50
  • I've noticed that inside my .btn-close class it makes 2 span tags child, which I didn't make them. and I'm missing the CSS of the .btn-close class, maybe that's the problematic factor. Adding an image of the 2 generated spans Oct 17, 2021 at 20:44

1 Answer 1

0

Fixed it, I downgraded my bootstrap version to match it with my react-bootstrap version.

1
  • You should not give an answer to your question with this type of comment please delete it and close your question
    – Jai248
    Oct 19, 2021 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.