Aligner la liste en bas à gauche

Comment pourrais-je faire la liste en bas de la div ne pas aller au-delà de la liste bouton de droite, comme dans l'image:
Aligner la liste en bas à gauche

Voici mon code.

HTML:

<a href="#" tabindex="0" class="btn btn" role="button" data-toggle="popover" data-trigger="focus" data-content="<input>">
    Search
</a>

Javascript:

$('[data-toggle="popover"]').popover({
                     trigger: 'manual',
                     placement: 'bottom',
                     html: true
                  }).click(function (e) {
                     e.preventDefault();
                     $(this).popover('show');
                  });

Bootply:

http://www.bootply.com/3SLzUgPyrV

  • vous pouvez essayer quelque chose comme cela et l'adapter à vos besoins. bootply.com/NZRFyE1zPw
  • c'est ce dont j'ai besoin, mais de toute façon pour enlever cette étrange réorganisant effet?
  • J'ai créé une réponse avec le correctif.
InformationsquelleAutor BernardoLima | 2014-11-24
  1. 10

    Vous pouvez essayer quelque chose comme cela et l'adapter à vos besoins:

    1.) Définir la position de la flèche via CSS:

    .popover.bottom .arrow {
    left:90% !important;
}

    2.) Définir la position de la liste après l'événement click. Avec votre code d'exemple, il pourrait ressembler à ceci:

    $('[data-toggle="popover"]').popover({
                 trigger: 'manual',
                 placement: 'bottom',
                 html: true
              }).click(function (e) {
                 e.preventDefault();
                 //Exibe o popover.
                 $(this).popover('show');

                $('.popover').css('left', '63px'); 
              });

    Exemple

    • Je vous remercie beaucoup.
    • Sebsemillia, il y a un problème, si je redimensionner la fenêtre, il ne sera pas positionné correctement.
    • Oui, bien sûr. Mon exemple est juste un soupçon dans la bonne direction. Vous devez changer $('.popover').css('left', '63px'); à vos besoins des projets. Utiliser des pourcentages et/ou le calcul de la position en fonction de la largeur de la fenêtre d'affichage..
    • juste pour laisser ici comme exemple: $('.popover').css('left', $(this).offset().left+'px'); $('.popover .arrow').css('left', ($(this).outerWidth()/2)+'px');
    InformationsquelleAutor Sebsemillia
  2. 3

    Avec Bootstrap v4, vous pouvez utiliser le 'décalage' des biens fournis par d'Attache:

    //Enable all popovers and tooltips
$('[data-toggle="popover"]').popover({
    html: true,
    offset: '0 100px' //offset the popover content
});

    Ce sera compensé la liste de contenu, mais vous aurez toujours besoin d'utiliser les CSS pour compenser la flèche

    • Super, merci pour ça - il est toujours préférable d'utiliser des fonctionnalités intégrées 😉
    InformationsquelleAutor Michael Multari
  3. 1

    Le chemin que j'ai fait c'est d'utiliser le insérée.bs.liste d'événements et de définir le décalage de la il y, étant donné que la largeur de la fenêtre pop-over est inconnu jusqu'alors. Cela permet d'aligner la fenêtre à gauche de la commande:

    var elWidth = inputElement.width();

inputElement.popover({
    container: 'body',
    animation: true,
    content: Msg,
    placement: 'top',
    trigger: 'hover'
}).on('inserted.bs.popover', function (e) {
    var id = $(this).attr("aria-describedby");
    var popover = $("#" + id);
    popover.data()['bs.popover'].config.offset = parseInt((popover.width() - elWidth) / 2, 10) + 'px';
});
    InformationsquelleAutor John