it-swarm.com.ru

Изменение ширины поповера Bootstrap

Я проектирую страницу, используя 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/

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

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

6
mayankbatra

Увеличьте ширину с помощью 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 popover increase width

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

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

311
Anil

Мне также нужен был более широкий поповер для текстового поля поиска. Я придумал это решение Javascript (здесь, в Кофе ):

$(".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 устанавливается пользовательское значение. Вы также можете добавить собственный класс к элементу tip.

37
2called-chaos

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

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

Для изменения ширины вы можете использовать css

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

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

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

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

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

27
Pimento Web

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

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

С помощью того, что @EML описало выше относительно popover в модальных окнах, а также кода, показанного @ 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"); });
6
ajitweb

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

Обновленная версия (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 могут решить проблему, я не пробовал.

4
tanguy_k

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

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

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

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

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

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

4
EML

Вот не-coffeescript способ сделать это с hover:

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

Вы можете использовать атрибут 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>
3
Nayan Hodar

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

2
CloudMagick

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

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

вы также можете добавить 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>
1
treize
 <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;

  }
1
CincyBella

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

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

Одно из протестированных решений для Bootstrap 4 beta:

.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({}) на самом деле не сработали [возможно, сработает do, но только вместе с оператором CSS];

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

0
vzR

Для компонента TypeScript:

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