Bootstrap: Google Map ne s'affiche pas dans un conteneur-fluide

Créé le 9 mars 2012 · 3Commentaires · Source: twbs/bootstrap

Salut,
J'ai une barre de navigation et une carte google 100% x 100% dans mon application. Je voudrais ajouter une barre latérale à droite avec un filtre différent. La raison de l'ajouter sur le côté droit est due à une meilleure expérience sur des écrans plus petits.

La carte s'affiche en plein écran avec des valeurs fluides (%) lorsque j'ajoute simplement la carte après la dernière division de la barre de navigation, comme ceci :

La carte est visible :

    <div class="navbar">
        <nav bar stuff......>
    </div>
    <div id="map-canvas"></div>

La carte n'est pas visible si j'essaie de l'ajouter à l'intérieur d'une étendue pour en contrôler la taille et ajouter une barre latérale.

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span9">
                <div id="map-canvas"></div>
            </div>
            <div class="span3">
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">Sidebar</li>
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Je ne veux pas ajouter de valeur fixe à la carte, car cela va à l'encontre du but du fluide.

Merci d'avance!

Source

fohlsom

Commentaire le plus utile

Impossible de le faire car la carte aura une hauteur de 0. Vous devez ajouter un rappel javascript qui définira manuellement la hauteur de la carte-canvas lorsque la fenêtre est redimensionnée, par exemple.

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

BenjiZombie le 9 mars 2012

👍4

Tous les 3 commentaires

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

BenjiZombie le 9 mars 2012

👍4

@BenjiZombie - Merci ! Cela l'a résolu!

fohlsom le 10 mars 2012

Merci! Après 10 suggestions différentes, celle-ci fonctionne rapidement et facilement !