web-dev-qa-db-fra.com

Bootstrap 3.0 affixe avec la liste des modifications de largeur

Je suis en train de migrer vers bootstrap 3.0.0 et j'ai un problème avec un menu apposé à gauche: dès qu'il est apposé (après le défilement 10px), sa largeur change. Dans ce violon il devient plus petit, dans mon vrai site, il devient plus large et étend son contenu.

Cela fonctionnait parfaitement avec bootstrap v2.3.2. Après vérification, il semble que les éléments de la liste ne fonctionnent pas bien avec le .affix {position: fixed;} qui apparaît.

Des idées?

SOLUTION: sur la base des derniers commentaires, j'ai finalement ajouté cette pièce JS qui la répare bien sans avoir à définir une largeur fixe pour l'élément apposé:

$(function() {
    var $affixElement = $('div[data-spy="affix"]');
    $affixElement.width($affixElement.parent().width());
});
csstwitter-bootstraptwitter-bootstrap-3affix
34
Davor

J'ai eu le même problème et résolu avec ceci:

 $(window).resize(function () {
                $('#category-nav.affix').width($('#content').width());
            });

fondamentalement, dans un événement de redimensionnement, je calcule la largeur de la div du contenu et assigne la largeur de l'élément apposé.

11
Gokhan
$(window).scroll(function () {
    $('#secondary .widget-area.affix').width($('#secondary').width());
});
8
Builder Dan

Voici une autre version:

$('.sitebar .affix-top').width($('.sitebar .affix-top').width());
$(window).resize(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});
$(window).scroll(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});
3
alex_wdmg

Voici ma version.

var fixAffixWidth = function() {
  $('[data-spy="affix"]').each(function() {
    $(this).width( $(this).parent().width() );
  });
}
fixAffixWidth();
$(window).resize(fixAffixWidth);

CSS

div.affix {
    position: fixed !important;
}
3
Ronald Veenbrink

eu le même problème une fois (seulement dans BS 2.3.2).

Pas une réponse, plus un bidouille : J'ai donné une largeur à l'élément apposé. C'est nul, parce que je devais définir la largeur de toutes les résolutions (RWD) et que la valeur devait être la largeur de colonne standard (par exemple .span4).

Oui: position: fixed extrait l'élément du contexte donné (dans votre cas, col-md-3).

1
Frank Lämmer

J'utilise ce code pour fixer la largeur de l'affixe.

$(document).on('affixed.bs.affix',function(e){
    $('.affix').each(function(){
        var elem = $(this);
        var parentPanel = $(elem).parent();
        var resizeFn = function () {
            var parentAffixWidth = $(parentPanel).width();
            elem.width(parentAffixWidth);
        };      

        resizeFn();
        //$(window).resize(resizeFn);
    });
});

L'affixe obtient la largeur de son parent et vérifie cette largeur à chaque défilement du Web. En supprimant la mise en commentaire de la dernière ligne, exécutez également l'événement de redimensionnement de fenêtre.

1
Jaca Meza

J'ai utilisé $('.affix-element').width($('.affix-element-parent').width()).affix()

Fonctionne bien :)

1
tidelake

Ma solution aussi:

$('.menu-card').affix();
$(document).on('affix.bs.affix', '.menu-card', function() {
    $(this).width($(this).width());
});

(.menu-card est mon div collant)

J'ai ajouté ceci pour supporter le redimensionnement de la fenêtre:

Supposons que l'affixe se trouve dans un volet parent # menu-card-card.

$(window).resize(function () {
    var parentSize = $('#menu-card-pane').width();
    $('.affix').each(function() {
        var affixPadding = $(this).innerWidth() - $(this).width();
        $(this).width(parentSize - affixPadding);
    });
});
1
Camel

Voici mon HTML

            <div class="sidebar-nav">
                <div class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar">
                            <span class="sr-only"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <span class="visible-xs navbar-brand">Committees</span>
                    </div>
                    <div id="committees-navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250">
                            <li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li>
                            <li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

Et ceci est mon correctif JS

$(function () {
   var resize = function () {
      var sidebarNav = $(".sidebar-nav");
      var sidebarNavAffix = $(".sidebar-nav .affix");
      if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) {
             sidebarNavAffix.width(sidebarNav.width());
      }
   }

   $(window).on({"scroll" : resize, "resize" : resize});
});
0
Ali Lane