Bonjour à toutes la communauté,

J'ai un soucis avec un chatbot que j'ai insérer sur ma page web. il y a un input qui permet d'afficher ou de faire disparaitre une  div lorsqu'ont clic dessus.

le problème c'est que la div même si elle est invisible, elle empêche les boutons ou lien de marché correctement.

etat Invisible du chatbox mais malgré qu'il est invisible, il empêche le bouton rechercher (en bleu) de marché et lorsque je clic sur ce bouton rien ne se passe ou c'est un lien du chatbox qui passe.

Vraiment j'ai besoin d'aide j'ai formulé la question de plusieurs manière sur google sans reponse concrète!

Merci d'avance à tous.

bonsoir, il faudrait montrer ce que tu utilises ppur la cacher evidemment si tu utilises visibility hidden l'element est tj present a la meme position donc tu vas juste pas le voir mais toujours sans ton code on ne peut pas savoir

OK, Voici le code

<input type="checkbox" id="check"> <label class="chat-btn" for="check"> <i class="fa fa-commenting-o comment"></i> <i class="fa fa-close close"></i> </label>
<div class="wrapper">
    <div class="header">
        <h6>Let's Chat - Online</h6>
    </div>
    <div class="text-center p-2"> <span>Please fill out the form to start chat!</span> </div>
    <div class="chat-form"> <input type="text" class="form-control" placeholder="Name"> <input type="text" class="form-control" placeholder="Email"> <textarea class="form-control" placeholder="Your Text Message"></textarea> <button class="btn btn-success btn-block">Submit</button> </div>
</div>

le html

============================================================

le css NB: j'utilise Bootstrap 5

.chat-btn {
    position: absolute;
    right: 14px;
    bottom: 30px;
    cursor: pointer
}

.chat-btn .close {
    display: none
}

.chat-btn i {
    transition: all 0.9s ease
}

#check:checked~.chat-btn i {
    display: block;
    pointer-events: auto;
    transform: rotate(180deg)
}

#check:checked~.chat-btn .comment {
    display: none
}

.chat-btn i {
    font-size: 22px;
    color: #fff !important
}

.chat-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background-color: blue;
    color: #fff;
    font-size: 22px;
    border: none
}

.wrapper {
    position: absolute;
    right: 20px;
    bottom: 100px;
    width: 300px;
    background-color: #fff;
    border-radius: 5px;
    opacity: 0;
    transition: all 0.4s
}

#check:checked~.wrapper {
    opacity: 1
}

.header {
    padding: 13px;
    background-color: blue;
    border-radius: 5px 5px 0px 0px;
    margin-bottom: 10px;
    color: #fff
}

.chat-form {
    padding: 15px
}

.chat-form input,
textarea,
button {
    margin-bottom: 10px
}

.chat-form textarea {
    resize: none
}

.form-control:focus,
.btn:focus {
    box-shadow: none
}

.btn,
.btn:focus,
.btn:hover {
    background-color: blue;
    border: blue
}

#check {
    display: none !important
}