Конфликт между jQuery-ui и bootstrap 3 при изменении размера

Я работаю с bootstrap 3 и jQuery-ui вместе, и у меня возникают проблемы при изменении размеров диалогов.

Я использую сеточную систему bootstrap, а также несколько стилей, поэтому я не могу удалить библиотеку или использовать Jquery.noConflict().

С jquery-ui я создал диалог с Iframe внутри, который работает нормально без начальной загрузки, но при включении этого css после изменения размера диалога несколько раз увеличивается правое поле.

Я создал jsfiddle, который показывает проблема.

$('a#pop').on('click', function (e)
{
    e.preventDefault();
    var page = $(this).attr("href");
    var pagetitle = $(this).attr("title");
    var myDialog = $('<div></div>')
    .html('<iframe style="border: 0; " src="' + page + '" width="100%" height="100%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: false,
        height: 500,
        width: 600,
        title: pagetitle,
        open: function (event, ui)
        {
            myDialog.css('overflow', 'hidden');
        }
     });
     myDialog.dialog('open');
});

http://jsfiddle.net/dani2688/6m4VN/

кто-нибудь знает как я могу это исправить, не удаляя ушко?

Я также нашел библиотеку jQuery-bootstrap, но проблема также возникает с помощью этого. https://github.com/addyosmani/jquery-ui-bootstrap

используя этот css, поля выглядят хорошо, но после изменения размера диалога несколько раз, его содержимое растет больше, чем рамка.

.ui-dialog .ui-dialog-content {
    -webkit-box-sizing: initial;
    -moz-box-sizing:initial;
     box-sizing: initial;`
 }

используя этот, проблема с правым полем исправлена, но не с нижним, и по какой-то странной причине использование #ui-id - * не устраняет проблему, мне нужно поставить конкретный идентификатор, который не хорош, потому что меняется каждый раз, когда я открываю новый диалог.

.ui-dialog *{
    box-sizing: border-box;
 }

#ui-id-1{
    width: 100% !important;
}

есть другие идеи о том, как это исправить?

наконец, я нашел решение этой проблемы: в файле css put:

ui-dialog-content {
    width: 100% !important;
    height: 100% !important;
}

iframe {
    height: 100% !important;
    padding-bottom:35px;
}

(.iframe-это класс, который я добавил в компоненте фрейма)

6
css jquery jquery-ui jquery-ui-resizable twitter-bootstrap-3

3 ответов

.ui-dialog,.ui-dialog-content {
    -webkit-box-sizing: content-box!important;
    -moz-box-sizing:content-box!important;
    box-sizing: content-box!important;
}
5

для меня этот CSS, кажется, устраняет проблему в вашем jsfiddle:

.ui-dialog *{
    box-sizing: border-box;
}

вы в основном установите размер коробки для всех элементов в .ui-dialog.

EDIT:

хорошо, теперь я понимаю... Добавьте это правило в свой CSS, и оно должно работать:

#ui-id-1{
    width: 100% !important;
}

существует проблема при подсчете ширины div (и, вероятно, высоты). Я не знаю, откуда берутся вычисления, но значение px неверно. Если у вас есть проблемы с высотой, а также, добавить height для вашего CSS, а также...

1

У меня была такая же проблема, я просто использовать

.ui-dialog {
    box-sizing:content-box;
}

и работает

1