Bootstrap всплывающая информация распространяется за пределы контейнера - PullRequest
Новая
       24

Bootstrap всплывающая информация распространяется за пределы контейнера

0 голосов
/ 02 апреля 2020

Я использую всплывающее окно bootstrap в качестве всплывающей подсказки внутри полей в файле данных jquery. Всплывающее окно содержит div для отображения данных в разных строках. Ряды, у которых нет набора, кажутся хорошими. При использовании, a выходит за пределы контейнера popover. Использование базового всплывающего окна bootstrap без каких-либо изменений для css.

Попытка изменить максимальную ширину базового класса всплывающих окон не имела значения. Также попытался добавить класс для изменения ширины, тоже без разницы.

Пример рассматриваемой проблемы. Обратите внимание, что я сохраняю перенос в DOB, чтобы показать разницу между «номером политики» и «dob»

enter image description here

Функция, в которой установлен поповер затем вызывает функцию openPopover для отображения 

    memberOver: function () {
        $("span.memberNameLink").hover(function () {
            let _index = $(this).data('id');
            let _table = $(claimstatus.claimsGridId).DataTable();

            let html = '<dl><dt>Policy Number:</dt><dd class="text-nowrap">' + u.getDataTableColumnData(_table, _index, 'PolicyNum') + '</dd></dl>';
            html += '<dl><dt>Gender:</dt><dd>' + u.getDataTableColumnData(_table, _index, 'Gender') + '</dd></dl>';
            html += '<dl><dt>DOB:</dt><dd>' + u.getDataTableColumnData(_table, _index, 'DOB') + '</dd></dl>';

            let _memberName = u.getDataTableColumnData(_table, _index, 'MemberName');

            claimstatus.openPopover($(this), 'Claim\'s Member Info: ' + _memberName.substr(0, _memberName.indexOf('<span')), html);
        });

        $("span.memberNameLink").on("mouseleave", function () { $(this).popover("hide"); });
    },


    openPopover: function (element, title, content) {
        let _isFirstTime = element.data('bs.popover') ? false : true;

        element.popover({
            trigger: 'hover focus click',
            title: '',
            content: '<div class="dialog-hover">' + content + '</div>',
            html: true,
            animation: true
        });

        element.popover('show');

    },

Div, используемого для поповера 

div.dialog-hover dl 
{
    clear: both;
}

div.dialog-hover dl dt
{
    float: left;
    padding: 4px;
}

div.dialog-hover dl dd
{
    font-weight: bold;
    padding: 4px;
}
...