Entrar Ainda não tem acesso?
2
respostas

[Dúvida] offcanvas não esta funcionando

Referente ao curso Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

por Eduardo de Souza Santos Thais
| 29.6k xp | 3 posts
Desenvolvedor

Estou tendo problemas quando clico no quero detalhes ele não esta abrindo o offcanvas do segundo e terceiro card, mas o primeiro funciona normalmente, tudo que foi alterado é o id e as descrições

<div class="card m-4" style="width: 20rem;">
          <img src="./assets/buffet-card.png" class="card-img-top" alt="Mesa de buffet com alimentos diversos">
          <div class="card-body">
            <h5 class="card-title fw-bold">Buffet</h5>
            <p class="card-text">Buffet e catering personalizado para eventos, produções e celebrações. Com
              um menu variado e adaptável às preferências do cliente, atendimento atencioso e
              profissional.</p>
            <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas" data-bs-target="#canvas-2" aria-controls="offcanvasRight">Quero detalhes</a>
          </div>
        </div>
      
      <div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-2" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasRightLabel">Buffet</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button botao-padrao" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Eventos
            </button>
          </h2>
          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              Organizamos buffet com cardápios variados e personalizados para casamentos, festas de aniversário e outros eventos! 
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Catering
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              Oferecemos serviço de alimentação variada para coffee breaks, produções e bastidores.  
            </div>
          </div>
        </div>
      </div>
    </div>
2 respostas
por Renan Lima
| 3697.8k xp | 7821 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Eduardo.

Tudo bem?

Pelo que você descreveu, parece que o primeiro card está funcionando corretamente, mas os demais não. Vamos verificar alguns pontos que podem estar causando esse problema.

  1. IDs Únicos: Certifique-se de que cada offcanvas e cada botão que o aciona possuem IDs únicos. No seu exemplo, você mencionou apenas o canvas-2. Se houver outros offcanvas, eles devem ter IDs diferentes, como canvas-3, canvas-4, etc.

  2. Correspondência de IDs: Verifique se o data-bs-target dos botões "Quero detalhes" está apontando para o ID correto do offcanvas correspondente.

Aqui está um exemplo de como você pode estruturar seus cards e offcanvas:

<!-- Primeiro Card -->
<div class="card m-4" style="width: 20rem;">
  <img src="./assets/buffet-card.png" class="card-img-top" alt="Mesa de buffet com alimentos diversos">
  <div class="card-body">
    <h5 class="card-title fw-bold">Buffet</h5>
    <p class="card-text">Buffet e catering personalizado para eventos, produções e celebrações...</p>
    <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas" data-bs-target="#canvas-1" aria-controls="offcanvasRight">Quero detalhes</a>
  </div>
</div>

<!-- Primeiro Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-1" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Buffet</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Conteúdo do primeiro offcanvas -->
  </div>
</div>

<!-- Segundo Card -->
<div class="card m-4" style="width: 20rem;">
  <img src="./assets/another-card.png" class="card-img-top" alt="Descrição da imagem">
  <div class="card-body">
    <h5 class="card-title fw-bold">Outro Serviço</h5>
    <p class="card-text">Descrição do serviço...</p>
    <a href="#" class="btn botao-padrao w-100 fw-bold mt-3" data-bs-toggle="offcanvas" data-bs-target="#canvas-2" aria-controls="offcanvasRight">Quero detalhes</a>
  </div>
</div>

<!-- Segundo Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-2" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Outro Serviço</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Conteúdo do segundo offcanvas -->
  </div>
</div>

Certifique-se de que cada data-bs-target no botão "Quero detalhes" corresponde ao ID do offcanvas correto. Além disso, cada offcanvas deve ter um ID único.

Espero ter entendido e conseguido ajudar. Qualquer coisa compartilha o código completo que conseguimos testar e comparar.

Espero ter ajudado e bons estudos!

por Eduardo de Souza Santos Thais
| 29.6k xp | 3 posts
Desenvolvedor

Verifiquei os IDs e estavam únicos, aparentemente o motivo de não funcionar certo é uma div que não foi fechada corretamente, mas não alertava nenhum erro ou coisa do tipo, agradeço a ajuda