Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Default CSS for glyphicons produces conflict with bootstrap5 components (with potential solution)

Aberta
  • Algo errado?
#1,820 3 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
52/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Pouca atividade
Stack de tecnologia
bootstrap, css, python
Domínio
frontend

Direção de pesquisa

Comece gerando o HTML a partir do exemplo de folium.Map e inspecione os links das folhas de estilo padrão, especialmente o Bootstrap 3 CSS e os estilos de modal do Bootstrap 5. Compare o comportamento do modal com e sem a folha de estilo do Bootstrap 3 e, em seguida, verifique se uma correção restaura a posição esperada do modal do Bootstrap 5 sem quebrar glyphicons ou outros componentes do Folium.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Describe the bug
Manually adding a bootstrap5 modal to the html body results in wrong position of the modal (see screenshots at the end).

To Reproduce

import folium

my_map = folium.Map()

# Adding modal from https://www.w3schools.com/bootstrap5/bootstrap_modal.php
my_map.get_root().html.add_child(folium.Element("""
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
"""))

my_map.save(outfile="map.html")

Expected behavior
The modal should appear in the same way as in the bootstrap5 modal example on w3schools.

Environment:

  • OS: macOS 14.0
  • Browser: Firefox 118.0.1
  • Python version: 3.10.7
  • folium version: 0.14.0
  • branca version: 0.6.0
  • Plain .py, no Jupyter Notebook

Possible solutions
This issue is resolved when uncommenting the stylesheet on netdna for bootstrap 3.0.0, however, I cannot tell what the implications to other functions of folium that would have (e.g. glyphicons).

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<!--    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>

Screenshots
Wrong: with default CSS <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
folium_bs5_modal_wrong

Correct: without default CSS <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
folium_bs5_modal_correct

Linguagem predominante
Python
Estrelas
7.4k
Forks
2.3k
Merge médio
10h 24min
PRs com merge (30d)
8

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de python-visualization/folium

Todas as issues de python-visualization/folium

Issues semelhantes

Mais issues de Python

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.