Projektuję stronę za pomocą Bootstrap 3. Próbuję użyć popover z placement: right
elementem wejściowym. Nowy Bootstrap zapewnia, że jeśli używasz, form-control
to 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/
źródło
$('[data-toggle="popover"]').popover({ container: 'body' });
!important
data-container="body"
na elemenciecontainer: "body"
.Potrzebowałem także szerszego okna popover dla pola tekstowego wyszukiwania. Wymyśliłem to rozwiązanie JavaScript (tutaj w Coffee ):
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.
źródło
.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
max-width
. Dziękuję za to rozwiązanie! Btw zamiast"600px"
, ustawiłem na"none"
. Dla mnie jest lepiej.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:
źródło
Aby zmienić szerokość, możesz użyć css
Poszukiwany stały rozmiar
Dla maksymalnej pożądanej szerokości:
jsfiddle : http://jsfiddle.net/Rqx8T/2/
źródło
Aby zmienić szerokość okna popover, możesz zastąpić szablon:
źródło
max-width: 500px
do stylu.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ć:
źródło
width
nie działająmax-width
Zasadniczo wstawiam kod popover do div wiersza, zamiast div wejścia. Rozwiązać problem.
źródło
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
Mój skrypt
źródło
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.
źródło
container: 'body'
normalnie robi lewę (patrz odpowiedź JustAnil powyżej), ale jest problem, jeśli twój popover jest w trybie modalnym. Wz-index
umieszcza go za w modalnym gdy popover podłączona dobody
. 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ćcontainer
zbody
, ale jeśli naprawić kod dowtedy rozwiązujesz
z-index
problem, ale szerokość popover jest nadal nieprawidłowa.Jedyną poprawką, jaką mogę znaleźć, jest użycie
container: 'body'
i dodanie dodatkowego css:Zauważ, że same rozwiązania css nie będą działać.
źródło
tooltip-append-to-body
, która pojawiła się za modalnym i modalnym „szarym” tłem.Możesz użyć atrybutu data-container = "body" w oknie popover
źródło
Oto sposób na zrobienie tego bez użycia coffeescript:
źródło
Jedno przetestowane rozwiązanie dla Bootstrap 4 beta:
Wraz z instrukcją jQuery:
Side-uwaga,
data-container="body"
lubcontainer: "body"
w formacie HTML lub jakooption
dopopover({})
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)
źródło
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ę)
źródło
Użyłem tego (działa dobrze):
źródło
W końcu ustawiam szerokość div „popover-content” na żądaną liczbę. (inne identyfikatory lub klasa nie będą działać .....) Powodzenia!
źródło
możesz także dodać data-container = "body", który powinien wykonać zadanie:
źródło
Możesz zmienić szablon swojego popovera. Albo z
data-template
atrybutem, albo z odpowiednią częścią funkcji, która go konfiguruje:źródło
W przypadku komponentu maszynopisu:
źródło
W Angular
ng-bootstrap
możesz po prostucontainer="body"
kontrolować element uruchamiający popover (taki jak przycisk lub pole tekstowe). Następnie w pliku (style.css
lubstyle.scss
) stylu globalnym musisz dodać.popover { max-width: 100% !important; }
. Następnie zawartość okna popover zostanie automatycznie ustawiona na szerokość treści.źródło
W bootstrap 4 możesz po prostu zastąpić domyślną wartość zmiennej bootstrap
$popover-max-width
w pliku styles.scss w następujący sposób:Więcej informacji o zastępowaniu wartości domyślnych bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults
źródło
W Bootstrap 4 możesz łatwo przejrzeć opcję szablonu, zastępując maksymalną szerokość:
To dobre rozwiązanie, jeśli masz kilka okien pop-up na stronie.
źródło
Spróbuj tego:
źródło
$('.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ść.