Question

我这里有一个奇怪的错误，我有一些想法可能导致这个。首先让我告诉你这个问题。

每当我调整对话框的大小时，＆＃34; ui-dialog-content＆＃34; width被更改为小于对话框其余部分的宽度。这很难解释，因此我创建了一个简短的视频，展示了问题以及如何去除＆＃34;宽度＆＃34;在调整大小时由jQuery添加的属性，它修复了问题。

视频：http://www.screencast.com/t/3oczroeEZUg

我发现它与Bootstrap 3和jQuery UI一起存在问题。我删除了Bootstrap 3样式表（这破坏了我的整个网站设计）并修复了问题。这意味着某些地方的CSS在两者之间存在冲突。

我不确定要添加哪些代码可以帮助您找到解决方案。我只是使用jQuery UI和Bootstrap 3.我想我可以希望其他人之前有过这个问题并且可以帮助我找到解决方案，我尝试搜索但没有提出任何问题，我可能还没有找到正确的关键字。

编辑：我已经在bootstrap.css

中跟踪了这些行的问题

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

在JUST对话框中查看如何覆盖此对话框，因为删除此代码会破坏我的整个网站。

Answer 1

我找到了一个解决方案，它不是100％完美，但它的工作做得很好。

正如我的帖子中的编辑所说，问题是由Bootstrap 3中的CSS引起的。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我创建了一个文件，并在我包含bootstrap之后将其包含在内，该文件仅覆盖对话框的这些设置。

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

这导致对话框主要表现。一些问题仍然存在，尽管它们是次要问题。

现在中间部分仍然大约5像素。如下所示：http://www.screencast.com/t/0nzFa9Kd
每次单击并调整框大小时，按钮区域都会被切掉约5-10个像素。最终按钮几乎完全隐藏，如下所示：http://www.screencast.com/t/EbNT7JjGX

这些问题相比较小，所以现在我会忽略它们。希望这有助于其他人！

Answer 2

根据我的理解来覆盖上面的样式，你可以通过在对话框被绑定的位置添加一个类来为div添加样式。请注意，您应该使用自定义类而不是覆盖内部类标记。

.divClass{
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

.divClass:before,
.divClass:after {
    -webkit-box-sizing: initial;
    -moz-box-sizing: initial;
    box-sizing: initial;
}

用jquery ui和bootstrap测试它，但猜猜它应该可行。 box-sizing属性initial应该适用于更多属性，请检查：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 3

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

这对我有用！

jQuery UI对话框调整大小会破坏内容宽度

3 个答案: