@Equipe @uiliancaetano
Olá pessoal! Espero que estejam bem!
Preciso de sua ajuda.
Fiz adaptação conforme o tutorial adaptando para meu conteúdo e está rodando. Porém, a última opção não mostra todo o conteúdo, há texto que está cortando. Por que isso? Existe limite de quanto texto pode ter cada opção? As opções VINDO DE TREM e VINDO DE ÔNIBUS funcionam direitinho, mas a opção VINDO DE CARRO está cortando e não aparecendo o texto todo!
No teste com a plataforma CODEPEN funcionou perfeitamente!
Podem me ajudar?
Meu app é o Ministério de Primeira e a opção é a COMO CHEGAR.
O código adaptado é o seguinte:
<meta name="viewport" content="width:device-width, initial-scale=1" />
<style type="text/css">* {
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
height: 100%;
margin: 30px;
padding: 0.25em;
font: 16px 'Roboto';
background-color: #ffffff;
color: black;
margin-left: 4px;
margin-right: 4px;
}
accordion {
margin: 0 auto;
max-width: 30em;
}
.toggle {
display: none;
}
.option {
position: relative;
margin-bottom: -18;
}
.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: all 0.2s;
}
.title {
background: #ffffff;
padding: 1em;
display: block;
color: #072838;
font-weight: bold;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
box-shadow: 3px 3px 6px #DCDCDC, -3px 3px 6px #DCDCDC;
}
.title:after, .title:before {
content: '';
position: absolute;
right: 1.25em;
top: 1.25em;
width: 2px;
height: 0.75em;
background-color: gray;
transition: all 0.2s;
}
.content {
max-height: 0;
overflow: hidden;
background-color: #ffffff;
width: 95%;
margin-left: 2.5%;
border-radius: 2px 2px 10px 10px;
}
.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}
.toggle:checked + .title, .toggle:checked + .title + .content {
box-shadow: 3px 3px 6px #DCDCDC, -3px 3px 6px #DCDCDC;
}
.toggle:checked + .title + .content {
max-height: 1000px;
}
.title:before {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.title:after {
transform: rotate(150deg);
right: 26px;
}
.toggle:checked + .title:after {
-webkit-transform: rotate(210deg) !important;
transform: rotate(210deg) !important;
}
.toggle:checked + .title:before {
-webkit-transform: rotate(-30deg) !important;
transform: rotate(-30deg) !important;
}
.main{
padding:15px;
}
.s {
width: 100%;
display: flex;
justify-content: space-around;
margin-top:30px;
}
.btn-img{
display: flex;
justify-content: center;
}
.mp{
text-align: center;
color: #fe950c;
}
h2{
color:#fe950c;
font-size:18px;
font-family: "Roboto", sans-serif;
}
p{
color:black;
margin-bottom:-20px;
}
</style>
<p><iframe allowfullscreen="" height="300" loading="lazy" scrolling="no" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3678.9676028988115!2d-43.39926055360688!3d-22.766583539855972!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9965d0ef09ac19%3A0x1be8621d4cd82971!2sPrimeira%20Igreja%20Batista%20em%20Belford%20Roxo!5e0!3m2!1spt-BR!2sbr!4v1621637552080!5m2!1spt-BR!2sbr" style="border:0;" width="400"></iframe></p>
<div class="main">
<br />
<div class="justificado">Estamos a 500m da Rod. Pres. Dutra, sentido São Paulo, no Centro da cidade, em frente ao Shopping e ao Posto de Saúde Neuzinha Brizola.
<ul>
<li>No mapa acima, use dois dedos para arrastar ou aumentar/diminuir a imagem.</li>
<br />
<li>Se desejar iniciar a navegação traçando rota de onde você está até nós, usando o GoogleMaps, clique em "Visualizar mapa ampliado", no mapa acima.</li>
<br />
<p>Para saber como chegar usando trem, ônibus, metrô ou carro, escolha a opção abaixo:</p>
</div>
<div class="container">
<div class="accordion">
<div class="option"><input class="toggle" id="toggle1" type="checkbox"><label class="title" for="toggle1">Vindo de Trem</label>
<div class="content">
<p style="color:black">Na estação de Belford Roxo, sair à esquerda, atravessar a Praça Eliaquim Batista, pegar o calçadão à esquerda, dobrar à direita na Rua Dagmar, dobrar à esquerda na Av. Benjamim Pinto Dias. A igreja estará a 150 metros do outro lado da calçada.</p>
</div>
</div>
</div>
<div class="accordion">
<div class="option"><input class="toggle" id="toggle2" type="checkbox" /> <label class="title" for="toggle2">Vindo de Ônibus</label>
<div class="content">
<style="color:black"><p style="margin-bottom:5px"><strong><font id="NovaIguaçu" size="3">Saindo de Nova Iguaçu</font></strong><br />
<strong>Linha 115/116</strong> – Nova Iguaçu x Duque de Caxias (Via Lote XV)<br />
<strong>Linha 136</strong> - Nova Iguaçu x Duque de Caxias (Via Vilar dos Teles)<br />
<strong>Linha 205</strong> – Nova Iguaçu x Belford Roxo – Via Piam<br />
<strong>Linha 206</strong> – Nova Iguaçu x Belford Roxo – Via Estrada Iguaçu<br />
<strong>Linha 450</strong> – Nova Iguaçu x Parque São José</p>
<p style="margin-bottom:5px"><strong><font id="MiguelCouto" size="3">Saindo de Miguel Couto</font></strong><br />
<strong>Linha 421</strong> – Miguel Couto x Pavuna</p>
<p style="margin-bottom:5px"><strong><font id="NovaAurora" size="3">Saindo de Nova Aurora</font></strong><br />
<strong>Linha 800</strong> – Nova Aurora x Madureira<br />
<strong>Linha 728</strong> – Nova Aurora x Bonsucesso</p>
<p style="margin-bottom:5px"><strong><font id="Tinguá" size="3">Saindo de Tinguá</font></strong><br />
<strong>Linha 423</strong> – Tinguá x Pavuna</p>
<p style="margin-bottom:5px"><strong><font id="Pavuna" size="3">Saindo de Pavuna</font></strong><br />
<strong>Linha 553</strong> – Pavuna x Santa Maria</p>
</div>
</div>
<div class="accordion">
<div class="option">
<input class="toggle" id="toggle4" type="checkbox" />
<label class="title" for="toggle4">Vindo de Carro</label>
<div class="content">
<strong><font id="Dutra-Rio" size="3">Dutra sentido RJ</font></strong><br />
<p style="margin-bottom:5px">
1) Em Nova Iguaçu, ao ver a empresa Assai, pegue a primeira saída para a pista marginal (lateral)<br />
2) Pegue a saída 173 (logo a uns 500m<br />
3) Pegue o viaduto para fazer o retorno para a Dutra sentido SP<br />
4) Ao descer do viaduto, dobre à direita no sinal e pegue a Dutra sentido SP<br />
5) Siga na pista do canto e pegue a primeira saída a direita, na Rua Gonçalves Gato<br />
6) Siga até o final e dobre à direita na Estr. Dr. Plínio Casado.<br />
7) Siga até o final e dobre à direita na Av. Benjamim Pinto Dias. Pronto! A 30m você estará no portão do estacionamento da igreja.</p>
<p style="margin-bottom:5px"><strong><font id="Dutra-SP" size="3">Dutra sentido SP</font></strong><br />
1) Se estiver na pista do centro, pegue a saída 170 e prossiga pela pista marginal<br />
2) Ao avistar o Carrefour, siga em frente passando direto pela entrada principal da cidade<br />
3) Após passar sob o viaduto, a aprox. 1km, pegue a primeira saída, na Rua Gonçalves Gato<br />
4) Siga até o final e dobre à direita na Estr. Dr. Plínio Casado.<br />
5) Siga até o final e dobre à direita na Av. Benjamim Pinto Dias. Pronto! A 30m você estará no portão do estacionamento da igreja.</p>
<p style="margin-bottom:5px"><strong><font id="C_Rocha" size="3">De Coelho da Rocha, ou viaduto da Bayer</font></strong><br />
1) Pegue a Dutra sentido SP, pista do canto<br />
2) Após passar sob o viaduto, após a entrada principal da cidade, a aprox. 1km, pegue a primeira saída, na Rua Gonçalves Gato<br />
3) Siga até o final e dobre à direita na Estr. Dr. Plínio Casado.<br />
4) Siga até o final e dobre à direita na Av. Benjamim Pinto Dias. Pronto! A 30m você estará no portão do estacionamento da igreja.</p>
<p style="margin-bottom:5px"><strong><font id="NIguaçu" size="3">De Nova Iguaçu</font></strong><br />
1) Pegue a Dutra, pista do canto, e ao ver a empresa Assai, pegue a saída 173<br />
2) Pegue o viaduto para fazer o retorno para a Dutra sentido SP<br />
3) Ao descer do viaduto, dobre à direita no sinal e pegue a Dutra sentido SP<br />
4) Siga na pista do canto e pegue a primeira saída a direita, na Rua Gonçalves Gato<br />
5) Siga até o final e dobre à direita na Estr. Dr. Plínio Casado.<br />
6) Siga até o final e dobre à direita na Av. Benjamim Pinto Dias. Pronto! A 30m você estará no portão do estacionamento da igreja.</p>
<p style="margin-bottom:5px"><strong><font id="Mig_Couto" size="3">De Miguel Couto</font></strong><br />
Se vier por dentro, ao chegar no Centro de Belford Roxo, seguir pela Av. Benjamim Pinto Dias, sentido Coelho da Rocha até o Shopping. A igreja é em frente. Senão, veja Dutra sentido RJ</p>
<p style="margin-bottom:5px"><strong><font id="Mesquita" size="3">De Mesquita</font></strong><br />
1) Vindo pela Av. Gov. Celso Peçanha, vá até o final dela, desembocando na Av. Coelho da Rocha.<br />
2) Siga em frente, atravesse o viaduto fazendo o retorno para pegar a Dutra sentido SP<br />
3) Ao descer do viaduto, dobre à direita no sinal e pegue a Dutra sentido SP<br />
4) Siga na pista do canto e pegue a primeira saída a direita, na Rua Gonçalves Gato<br />
5) Siga até o final e dobre à direita na Estr. Dr. Plínio Casado.<br />
6) Siga até o final e dobre à direita na Av. Benjamim Pinto Dias. Pronto! A 30m você estará no portão do estacionamento da igreja.</p>
</div>
</div>
</div>