css - attribute - Añadido de Bootstrap 3.0 con ancho de cambios de lista

html5 tags list

Question

Estoy migrando a bootstrap 3.0.0 y estoy teniendo problemas con un menú adherido a la izquierda: tan pronto como se fija (después de 10px scroll), su ancho cambia. En este violín se hace más pequeño, en mi sitio real se ensancha y se expande en el contenido real.

Funcionó perfectamente con bootstrap v2.3.2. Después de verificar, parece que los elementos de la lista no funcionan bien con el .affix {position: fixed;} que aparece.

¿Algunas ideas?

SOLUCIÓN: en base a los últimos comentarios, finalmente agregué esta pieza de JS que lo arregla muy bien sin tener que establecer un ancho fijo para el elemento fijo:

$(function() {
    var $affixElement = $(''div[data-spy="affix"]'');
    $affixElement.width($affixElement.parent().width());
});

Answer 1

Aquí está mi 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>

Y esta es mi solución 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});
});

Answer 2

Aquí está mi versión.

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

CSS

div.affix {
    position: fixed !important;
}

Answer 3

Aquí hay otra versión:

$(''.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());
});

Answer 4

Mi solución también:

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

(.menu-card es mi div pegajoso)

Agregué esto para apoyar el cambio de tamaño de la ventana:

Supongamos que el afijo está en un panel de menú Div div # menu-card.

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

Answer 5

Tuve el mismo problema y solucioné esto:

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

Básicamente, en un evento de cambio de tamaño, calculo el ancho del contenido div y establezco el ancho del elemento fijo.

Answer 6

Usé $(''.affix-element'').width($(''.affix-element-parent'').width()).affix()

Funciona bien :)

Answer 7

Yo uso este código para arreglar el ancho del afijo.

$(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);
    });
});

El afijo obtiene el ancho de su padre y verifica ese ancho en cada desplazamiento de la web. Descomentando la última línea, ejecute también el evento de cambio de tamaño de la ventana.

Answer 8

tuvo el mismo problema una vez (solo en BS 2.3.2).

No una respuesta, más un truco : le di un ancho al elemento fijo. Eso apestaba, porque tenía que establecer el ancho para todas las resoluciones (RWD) y, de hecho, el valor debe ser el ancho de columna estándar (por ejemplo, .span4).

Sí: position: fixed saca el elemento del contexto dado (en su caso col-md-3 ).

Answer 9

$(window).scroll(function () {
    $(''#secondary .widget-area.affix'').width($(''#secondary'').width());
});