Изменение ширины всплывающего окна Bootstrap

Question 1

Я создаю страницу с помощью Bootstrap 3. Я пытаюсь использовать всплывающее окно с placement: rightэлементом ввода. Новый Bootstrap гарантирует, что, если вы используете, у form-controlвас будет элемент ввода полной ширины.

HTML-код выглядит примерно так:

<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>

На мой взгляд, ширина всплывающих окон слишком мала, потому что их ширины не осталось в div. Мне нужна форма ввода слева и широкое всплывающее окно справа.

В основном я ищу решение, в котором мне не нужно переопределять Bootstrap.

Прикрепленный JsFiddle. Второй вариант ввода. Я не часто использовал jsfiddle, поэтому не знаю, но попробуйте увеличить размер поля вывода, чтобы увидеть результаты, на небольших экранах его даже не увидишь. http://jsfiddle.net/Rqx8T/

Question 2

Увеличить ширину с помощью CSS

Вы можете использовать CSS для увеличения ширины всплывающего окна, например:

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

Если это не сработает, вы, вероятно, захотите решение, указанное ниже, и измените свой containerэлемент. ( Просмотреть JSFiddle )

Контейнер начальной загрузки Twitter

Если это не сработает, вам, вероятно, нужно указать контейнер:

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

Больше информации

Всплывающее окно Twitter Bootstrap увеличить ширину

Всплывающее окно содержится в элементе, в котором оно запускается. Чтобы расширить его "на всю ширину" - укажите контейнер:

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

JSFiddle

Просмотрите JSFiddle, чтобы попробовать.

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

Question 3

Мне также нужно было более широкое всплывающее окно для текстового поля поиска. Я придумал это решение Javascript (здесь, в 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"))

Обходной путь находится в последней строке. Перед отображением всплывающего окна для параметра max-width устанавливается произвольное значение. Вы также можете добавить собственный класс к элементу подсказки.

Question 4

У меня такая же проблема. Потратил некоторое время на поиск ответа и нашел свое собственное решение: добавьте следующий текст в заголовок:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Question 5

Чтобы изменить ширину, вы можете использовать css

Требуется фиксированный размер

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

Для максимальной ширины требуется:

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

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

Question 6

Чтобы изменить ширину всплывающего окна, вы можете переопределить шаблон:

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

Question 7

Для людей, предпочитающих решение на JavaScript. В Bootstrap 4 tip () превратился в getTipElement () и не возвращает объект jQuery. Итак, чтобы изменить ширину всплывающего окна в Bootstrap 4, вы можете использовать:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

Question 8

<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>

В основном я помещаю код всплывающего окна в строку div вместо входного div. Решил проблему.

Question 9

С помощью того, что @EML описал выше относительно всплывающих окон в модальных окнах, а также кода, показанного @ 2called-chaos, вот как я решил проблему.

У меня есть значок в модальном окне, при нажатии на который должно появиться всплывающее окно

Мой 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>

Мой сценарий

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

Question 10

Окончательного решения здесь нет: / Только мысли, как «чисто» решить эту проблему ...

Обновленная версия (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" вместо class = "col-md-") вашего исходного JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Теперь тот же JSFiddle с предложенным вами решением : http://jsfiddle.net/tkrotoff/N99h7/8/
Это не работает: всплывающее окно расположено относительно <div class="col-*">+ представьте, что у вас есть несколько входов для одного и того же <div class="col-*">...

Итак, если мы хотим сохранить всплывающее окно на входах (семантически лучше):

.popover { position: fixed; }: но тогда каждый раз, когда вы прокручиваете страницу, всплывающее окно не будет следовать за прокруткой
.popover { width: 100%; }: не так хорошо, так как вы все еще зависите от родительской ширины (т.е. <div class="col-*">
.popover-content { white-space: nowrap; }: хорошо, только если текст внутри всплывающего окна короче, чем max-width

См. Http://jsfiddle.net/tkrotoff/N99h7/11/

Возможно, при использовании новейших браузеров новые значения ширины CSS могут решить проблему, я не пробовал.

Question 11

container: 'body'обычно помогает (см. ответ JustAnil выше), но проблема возникает, если ваше всплывающее окно находится в модальном режиме. В z-indexпомещает его за модальным когда поповер присоединено к body. Кажется, это связано с проблемой 5014 BS2 , но я получаю ее на 3.1.1. Вы не должны использовать a containerof body, но если вы исправите код на

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

затем вы z-indexустраняете проблему, но ширина всплывающего окна по-прежнему неверна.

Единственное исправление, которое я могу найти, - это использовать container: 'body'и добавить дополнительный css:

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

Обратите внимание, что решения css сами по себе работать не будут.

Question 12

Вы можете использовать атрибут data-container = "body" в 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>

Question 13

Вот способ сделать это с помощью наведения курсора, не связанный с кофе:

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

Question 14

Одно протестированное решение для бета-версии Bootstrap 4:

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

Вместе с оператором jQuery:

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

Побочное примечание, data-container="body"или container: "body"в любом HTML или как optionк popover({})объекту действительно не сделать трюк [возможно сделать работу , но только вместе с утверждением CSS];

Также помните, что бета-версия Bootstrap 4 полагается на popper.js для позиционирования всплывающих окон и всплывающих подсказок (до этого это был tether.js).

Question 15

Вы можете настроить ширину всплывающего окна с помощью методов, указанных выше, но лучше всего определить ширину содержимого до того, как Bootstrap увидит его и выполнит свои вычисления. Например, у меня была таблица, я определил ее ширину, а затем bootstrap построил всплывающее окно, которое ей подходит. (Иногда Bootstrap не может определить ширину, и вам нужно войти и взять его за руку)

Question 16

Я использовал это (работает нормально):

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

Question 17

 <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>

Я заканчиваю тем, что устанавливаю ширину div "popover-content" на нужное мне число. (другие идентификаторы или классы не будут работать .....) Удачи!

  #popover-content{
      width: 600px;

  }

Question 18

вы также можете добавить data-container = "body", который должен выполнять эту работу:

<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>

Question 19

Вы можете изменить шаблон вашего всплывающего окна. Либо с data-templateатрибутом -attribute, либо с соответствующей частью функции, которая его устанавливает:

<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>

Развернуть фрагмент

Question 20

В Bootstrap 4 вы можете легко просмотреть параметр шаблона, переопределив max-width:

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

Это хорошее решение, если у вас есть несколько всплывающих окон на странице.

Question 21

Для компонента машинописного текста:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

Question 22

В Angular ng-bootstrapвы можете просто container="body"использовать элемент управления, который запускает всплывающее окно (например, кнопку или текстовое поле). Затем в вашем глобальном файле ( style.cssили style.scss) файле стиля вы должны добавить .popover { max-width: 100% !important; }. После этого содержимое всплывающего окна автоматически установится на его ширину.

Question 23

В bootstrap 4 вы можете просто переопределить значение по умолчанию для переменной начальной загрузки $popover-max-widthв вашем файле styles.scss следующим образом:

$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";

Подробнее о переопределении значений по умолчанию для начальной загрузки 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Question 24

Попробуй это:

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));