{"componentChunkName":"component---src-templates-blog-post-js","path":"/en/writing/2breakpoint-modal-scrolling/","result":{"data":{"site":{"siteMetadata":{"title":"Um site de um desenvolvedor de software","author":"Dheyson L. Alves","description":"Um site sobre computação e desenvolvimento","charSet":"utf8"}},"locales":{"edges":[{"node":{"ns":"translation","data":"{\"Home\":\"Home\",\"Escrita\":\"Writing\",\"Portfólio\":\"Portfolio\",\"Sobre\":\"About\",\"Últimas publicações\":\"Latest Posts\",\"Engenheiro de Software com mais de 3 anos de experiência na indústria. Ajudando empresas de diferentes nichos a atingir seu potencial com aplicativos de software.\":\"Software Engineer with more than 3 years of experience in the industry. Helping companies from different niches to reach their potential with software applications.\",\"Codando. Escrevendo. Aprendendo. Ensinando.\":\"Coding. Writing. Learning. Teaching.\",\"CSS, JAVASCRIPT, TYPESCRIPT, REACT E FRONT-END NO GERAL.\":\"CSS, JAVASCRIPT, TYPESCRIPT, REACT AND FRONT-END WORLD.\",\"Front-End Engineer\":\"Front-End Engineer\",\"Opa, e ai?\":\"Hey, what's up\",\"Página principal\":\"Main page\",\"Alguns artigos que escrevi\":\"Some articles I wrote\",\"Meus atuais projetos\":\"My current projects\",\"Que tal acender a luz?\":\"How about turning on the light?\",\"Que tal apagar a luz?\":\"How about turning off the light?\",\"Logo do Linkedin rede social\":\"Linkedin logo social network\",\"Minha rede profissional\":\"My professional network\",\"Logo do passado com cor branca do twitter\":\"Logo of the past with twitter color white\",\"Quer trocar uma ideia?, manda dm\":\"Want to exchange an idea?, send a dm\",\"social media\":\"Social Media\",\"Boa parte dos meus projetos\":\"Most of my projects\",\"Logo quadrada com fundo preto com texto DEV no meio de cor branca\":\"Square logo with black background with DEV text in the middle of white color\",\"Meus outros artigos em inglês\":\"My other articles in English\",\"Logo quadrada com fundo preto com símbolo de controle no meio\":\"Square logo with black background with control symbol in the middle\",\"Comunidade do discord da Coffer\":\"Coffer's discord community\",\"Todas as publicações\":\"All publications\",\"Postado em\":\"Posted in\",\"Uma página de erro que poderia encontrar a solicitação.\":\"An error page that could find the request.\",\"Ah não! Algo está errado...\":\"Oh no! Something is wrong...\",\"Você clicou em uma rota que não existe ... que pena.\":\"You clicked on a route that doesn't exist... what a pity.\",\"Dheyson L. Alves - Sobre\":\"Dheyson L. Alves - About\",\"Olá, sou Dheyson L. Alves\":\"Hi, I am Dheyson L. Alves\",\"Engenheiro de Software com 3 anos de experiência na indústria. Ajudando empresas de diferentes origens aatingir seu potencial com aplicativos de software.\":\"Software Engineer with 3 years of experience in the industry. Helping companies from different backgrounds reach their potential with software applications.\",\"Além disso, criei com estudantes universitários uma comunidade de desenvolvedores chamada CofferHub. Foco em ensinar e aprender juntos. Fico entusiasmado com as oportunidades em que posso trabalhar com produtos que impactam muitas pessoas. Além disso, trabalhar com uma equipe com uma mentalidade de crescimento e aprendizado.\":\"In addition, I created with college students a developer community called CofferHub. Focus on teaching and learning together. I am excited about the opportunities where I can work with products that impact many people. Also, working with a team with a growth and learning mindset.\",\"minutos de leitura\":\"reading time\",\"Escrito por\":\"Written by\",\"Pesquise por tags\":\"Search by tags\",\"artigo\":\"article\",\"artigos\":\"articles\",\"Artigo não encontrado\":\"Article not found\",\"Parece que você chegou a uma pesquisa que não existe. Por favor, use a navegação acima ou pesquise acima para encontrar o caminho de volta ao nosso site daora.\":\"It looks like you've come to a search that doesn't exist. Please use the navigation above or search above to find your way back to our cool website.\",\"Mais Artigos\":\"More Articles\"}","language":"en"}}]},"markdownRemark":{"id":"330daf8c-e5ed-5e49-8f0a-41b5184c373e","excerpt":"Introdução Photo By Mani Bhargava Photo by Kar Ming Moo on Unsplash Muitas vezes buscamos soluções para o CSS que requerem a ajuda do Javascript para…","html":"

Introdução

\n

\"Photo

\n

Photo by Kar Ming Moo on Unsplash

\n

Muitas vezes buscamos soluções para o CSS que requerem a ajuda do Javascript para funcionalidades customizadas. Mas esquecemos, que nos últimos anos, CSS evoluiu bastante e existem várias novas soluções para problemas comuns do CSS, sem a ajuda de uma línguagem.

\n

Hoje passei por um problema que me deixou nessa situação, pensei em algumas possibilidades usando Javascript, mas foi o CSS que me salvou desse problema.

\n

Funcionamento do Modal do Bootstrap

\n

O Modal é posicionado sob todo o documento, removendo o Scroll da tag .

\n
<div class=\"modal\" tabindex=\"-1\" role=\"dialog\">\n  <div class=\"modal-dialog\" role=\"document\">\n    <div class=\"modal-content\">\n      <div class=\"modal-header\">\n        <h5 class=\"modal-title\">Modal title</h5>\n        <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n          <span aria-hidden=\"true\">&times;</span>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <p>Modal body text goes here.</p>\n      </div>\n      <div class=\"modal-footer\">\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\n        <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\n      </div>\n    </div>\n  </div>\n</div>
\n

O Contexto do Problema

\n

Eu estava com uma situação comum usando Bootstrap 4, um modal aninhado, ou seja, um modal dentro de outro. O problema real era que quando o modal mais interno era fechado, o estado do Scroll do modal anterior era perdido, ativando novamente o scroll do <body> do html. O que não é o comportamento esperado.

\n

A Solução

\n

A propriedade do CSS overflow-y adiciona uma scroll-bar ou adiciona um conteúdo overflow de elemento block, no nosso caso, uma div modal. Existem várias valores para essa propriedade, mas no nosso caso, o valor auto, foi o mais de acordo com nosso problema.

\n

”Deve fazer com que um scroll seja fornecido para conteúdos com valores overflow”

\n

No bootstrap, o seletor CSS que determina o modal é o .modal, logo adicionei nele a propriedade, e nosso problema foi resolvido. Adicionando o scroll referente ao conteúdo do modal de nível mais baixo.

\n
.modal {\n\toverflow-y: auto;\n}
\n

Conclusão

\n

Como comentado anteriormente, apenas uma linha de código, pude resolver esse pequeno problema, e nem todas as vezes, é necessário usar Javascript ou Jquery para tudo.

","timeToRead":2,"frontmatter":{"title":"Breakpoint #2 - Modal Scrolling","date":"January 05, 2021","description":"Muitas vezes buscamos soluções para o CSS que requerem a ajuda do Javascript para funcionalidades customizadas. Mas esquecemos, que nos últimos anos, CSS evoluiu bastante e existem várias novas soluções para problems comuns do CSS, sem a ajuda de uma línguagem.","tags":["CSS"]}}},"pageContext":{"slug":"/2breakpoint-modal-scrolling/","previous":{"fields":{"slug":"/2021-novo-ano-novos-desafios/"},"frontmatter":{"title":"2021 - Novo Ano, Novos Desafios","tags":["GERAL"]}},"next":{"fields":{"slug":"/meu-coworker-perguntou1/"},"frontmatter":{"title":"Como realizar um merge com Git?","tags":["GIT"]}},"language":"en","i18n":{"language":"en","languages":["pt","en"],"defaultLanguage":"pt","generateDefaultLanguagePage":false,"routed":true,"originalPath":"/writing/2breakpoint-modal-scrolling/","path":"en/writing/2breakpoint-modal-scrolling/"}}},"staticQueryHashes":["63159454"]}