Zmiana szerokości popover Bootstrap

192

Projektuję stronę za pomocą Bootstrap 3. Próbuję użyć popover z placement: rightelementem wejściowym. Nowy Bootstrap zapewnia, że ​​jeśli używasz, form-controlto zasadniczo masz element wejściowy o pełnej szerokości.

Kod HTML wygląda mniej więcej tak:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Moim zdaniem szerokość popovera jest zbyt niska, ponieważ nie ma żadnej szerokości w div. Chcę formularz wejściowy po lewej stronie i szeroki popover po prawej stronie.

Głównie szukam rozwiązania, w którym nie muszę zastępować Bootstrap.

Załączony JsFiddle. Druga opcja wprowadzania. Nie korzystałem często z jsfiddle, więc nie wiem, ale spróbuj zwiększyć rozmiar pola wyjściowego, aby zobaczyć wyniki, na mniejszych ekranach nawet go nie zobaczą. http://jsfiddle.net/Rqx8T/

mayankbatra
źródło

Odpowiedzi:

343

Zwiększ szerokość za pomocą CSS

Możesz użyć CSS, aby zwiększyć szerokość swojego popovera:

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

Jeśli to nie zadziała, prawdopodobnie potrzebujesz rozwiązania poniżej i zmień swój containerelement. ( Zobacz JSFiddle )


Kontener bootstrap na Twitterze

Jeśli to nie zadziała, prawdopodobnie musisz określić kontener:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

Więcej informacji

Popover Bootstrap zwiększa szerokość

Popover jest zawarty w elemencie, w którym jest uruchamiany. Aby go rozszerzyć na „pełną szerokość” - określ kontener:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

Zobacz JSFiddle, aby go wypróbować.

JSFiddle: http://jsfiddle.net/xp1369g4/

Indygowiec
źródło
1
+1, ale będzie / może nie działać, jeśli twój popover jest w trybie modalnym: zobacz moją odpowiedź poniżej.
EML
2
Powyższa odpowiedź była dla mnie TLDR, ale zawierała ten genialny fragment, który rozwiązał zarówno szerokość, jak i problem przechwytywania wszystkich popovers:$('[data-toggle="popover"]').popover({ container: 'body' });
Gregory Cosmo Haun,
2
Musiałem dodać!important
Peter Ehrlich
Możesz użyć atrybutu neater data: data-container="body"na elemencie
stephen
@ surfer190 Neater na zasadzie pop-popover, ale bałagan, jeśli chcesz, aby każdy popover miał container: "body".
Chris Cirefice,
39

Potrzebowałem także szerszego okna popover dla pola tekstowego wyszukiwania. Wymyśliłem to rozwiązanie JavaScript (tutaj w Coffee ):

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

Obejście znajduje się w ostatnim wierszu. Przed wyświetleniem okna podręcznego opcja maksymalnej szerokości jest ustawiana na wartość niestandardową. Możesz także dodać niestandardową klasę do elementu tip.

2 wywołany chaos
źródło
28
Jeśli nie znasz się na kawie, oto ta sama ostatnia linijka, co zwykłe js:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
Colin
1
Co to jest .tip ()? Dlaczego warto korzystać z .data ()? XD Naprawdę tego nie rozumiem, ale działa! Podoba mi się to rozwiązanie bardziej niż pisanie nowego CSS w celu zastąpienia domyślnego max-width. Dziękuję za to rozwiązanie! Btw zamiast "600px", ustawiłem na "none". Dla mnie jest lepiej.
Taufik Nur Rahmanda
36

Miałem ten sam problem. Sporo czasu szukałem odpowiedzi i znalazłem własne rozwiązanie: dodaj następujący tekst do głowy:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>
Aleksey Shafransky
źródło
1
Może być konieczne dodanie! Ważne, aby zastąpić domyślne ustawienie ładowania początkowego.
John Creamer,
29

Aby zmienić szerokość, możesz użyć css

Poszukiwany stały rozmiar

.popover{
    width:200px;
    height:250px;    
}

Dla maksymalnej pożądanej szerokości:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle : http://jsfiddle.net/Rqx8T/2/

BENARD Patrick
źródło
2
To po pierwsze zmieniłoby szerokość popover w całej witrynie. Ale znalazłem odpowiedź. Bardziej poprawnie obejście problemu, publikując je teraz.
mayankbatra
@Peter, nie mogę odtworzyć twojego problemu, myślę, że po prostu zapomniałeś dodać umieszczanie danych do swoich danych wejściowych ...
BENARD Patrick
@pbenard Mam ten sam problem, twoje rozwiązanie działa w celu obniżenia maksymalnej szerokości niż 276 pikseli. Ale jeśli spróbujesz zmienić maksymalną szerokość więcej niż to, to się nie zmieni.
Hardik Patel
18

Aby zmienić szerokość okna popover, możesz zastąpić szablon:

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})
Tyczo
źródło
1
nie działało dla mnie .. Musiałem też dodać max-width: 500pxdo stylu.
cronfy,
7

Dla osób, które wolą rozwiązanie JavaScript. W Bootstrap 4 tip () stał się getTipElement () i zwraca obiekt no jQuery. Aby więc zmienić szerokość popovera w Bootstrap 4, możesz użyć:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
Dirceu
źródło
Działa to dla mnie, jednak tylko wtedy, gdy ustawienia widthnie działająmax-width
Deano
6
<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Zasadniczo wstawiam kod popover do div wiersza, zamiast div wejścia. Rozwiązać problem.

mayankbatra
źródło
nie działało dla mnie. Spodziewałem się, że zadziała :( Odd
t.durden
6

Z pomocą tego, co @EML opisał powyżej w odniesieniu do popover w oknach modalnych, a także kodu pokazanego przez @ 2called-chaos, w ten sposób rozwiązałem problem.

Mam ikonę modalu, która po kliknięciu powinna wyskakować

Mój HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

Mój skrypt

    $('[rel=popover]').popover({
        placement: 'bottom',
        html: 'true',
        container: '#name-of-modal-window .modal-body'
    }).on("show.bs.popover", function () { $(this).data("bs.popover").tip().css("max-width", "600px"); });
ajitweb
źródło
4

Nie ma tutaj ostatecznego rozwiązania: / Kilka myśli, jak „czysto” rozwiązać ten problem ...

Zaktualizowana wersja (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" zamiast class = "col-md-") oryginalnego JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Teraz ten sam JSFiddle z proponowanym rozwiązaniem : http://jsfiddle.net/tkrotoff/N99h7/8/
To nie działa: popover jest ustawiony względem <div class="col-*">+ wyobraź sobie, że masz wiele danych wejściowych dla tego samego <div class="col-*">...

Więc jeśli chcemy zachować popover na wejściach (semantycznie lepiej):

  • .popover { position: fixed; }: ale wtedy za każdym razem, gdy przewijasz stronę, popover nie będzie podążał za przewijaniem
  • .popover { width: 100%; }: niezbyt dobre, ponieważ nadal zależysz od szerokości rodzica (tj <div class="col-*">
  • .popover-content { white-space: nowrap; }: dobre tylko wtedy, gdy tekst w oknie popover jest krótszy niż max-width

Zobacz http://jsfiddle.net/tkrotoff/N99h7/11/

Być może, używając najnowszych przeglądarek, nowe wartości szerokości CSS mogą rozwiązać problem, nie próbowałem.

tanguy_k
źródło
4

container: 'body'normalnie robi lewę (patrz odpowiedź JustAnil powyżej), ale jest problem, jeśli twój popover jest w trybie modalnym. W z-indexumieszcza go za w modalnym gdy popover podłączona do body. Wydaje się, że jest to związane z problemem BS2 5014 , ale dostaję to w wersji 3.1.1. Chyba nie ma na celu używać containerz body, ale jeśli naprawić kod do

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

wtedy rozwiązujesz z-indexproblem, ale szerokość popover jest nadal nieprawidłowa.

Jedyną poprawką, jaką mogę znaleźć, jest użycie container: 'body'i dodanie dodatkowego css:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Zauważ, że same rozwiązania css nie będą działać.

EML
źródło
1
+1 na to, że jest denerwujące, gdy za modalem pojawia się popover. Ten sam problem natrafiłem na dyrektywę angular-ui bootstrap przy użyciu podpowiedzi tooltip-append-to-body, która pojawiła się za modalnym i modalnym „szarym” tłem.
Daryn
4

Możesz użyć atrybutu data-container = "body" w oknie popover

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>
Nayan Hodar
źródło
4

Oto sposób na zrobienie tego bez użycia coffeescript:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});
Abram
źródło
3

Jedno przetestowane rozwiązanie dla Bootstrap 4 beta:

.popover {
        min-width: 30em !important;
    }

Wraz z instrukcją jQuery:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

Side-uwaga, data-container="body"lub container: "body"w formacie HTML lub jako optiondo popover({})obiektu nie naprawdę rade [być może wykonywać pracę, ale tylko razem z oświadczeniem CSS];

Pamiętaj też, że Bootstrap 4 beta opiera się na popper.js w zakresie popover i pozycjonowania podpowiedzi (wcześniej był to tether.js)

vzR
źródło
2

Możesz dostosować szerokość okna popover za pomocą metod wskazanych powyżej, ale najlepiej jest zdefiniować szerokość zawartości, zanim Bootstrap zobaczy i dokona matematyki. Na przykład miałem tabelę, zdefiniowałem jej szerokość, a następnie bootstrap zbudował popovera, aby go dopasować. (Czasami Bootstrap ma problem z określeniem szerokości i musisz wejść i przytrzymać rękę)

CloudMagick
źródło
2

Użyłem tego (działa dobrze):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}
Bimal Das
źródło
2
 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

W końcu ustawiam szerokość div „popover-content” na żądaną liczbę. (inne identyfikatory lub klasa nie będą działać .....) Powodzenia!

  #popover-content{
      width: 600px;

  }
CincyBella
źródło
1

możesz także dodać data-container = "body", który powinien wykonać zadanie:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>
traktować
źródło
wow ... odpowiada również na oryginalne pytanie. Wyczyść i nie zastępuje bootstrapu.
Johnathan Elmore,
jak to zmienia szerokość popovera?
t.durden
1

Możesz zmienić szablon swojego popovera. Albo z data-templateatrybutem, albo z odpowiednią częścią funkcji, która go konfiguruje:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

FalcoGer
źródło
0

W przypadku komponentu maszynopisu:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})
Jozuego
źródło
0

W Angular ng-bootstrapmożesz po prostu container="body"kontrolować element uruchamiający popover (taki jak przycisk lub pole tekstowe). Następnie w pliku ( style.csslub style.scss) stylu globalnym musisz dodać .popover { max-width: 100% !important; }. Następnie zawartość okna popover zostanie automatycznie ustawiona na szerokość treści.

Ramin Ar
źródło
0

W bootstrap 4 możesz po prostu zastąpić domyślną wartość zmiennej bootstrap $popover-max-widthw pliku styles.scss w następujący sposób:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

Więcej informacji o zastępowaniu wartości domyślnych bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Aleksei Protopopov
źródło
0

W Bootstrap 4 możesz łatwo przejrzeć opcję szablonu, zastępując maksymalną szerokość:

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

To dobre rozwiązanie, jeśli masz kilka okien pop-up na stronie.

Vincent Decaux
źródło
-2

Spróbuj tego:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));
Phani CR
źródło
To nie zadziała z powodu ostatniej linii. Przetwarzanie liczby całkowitej jako wartości dla szerokości spowoduje uszkodzenie CSS. Zamiast tego powinieneś spróbować: $('.popover').css('width', popover_size + 'px');Ponieważ rozmiar popover_s jest analizowany jako liczba całkowita. Inna sprawa: popover_size = ((parseInt(string[0])+350));doda dodatkową szerokość.
Todor Todorov