Question

我有一个数字字段，每边有2个按钮可以递增/递减。它不是在jQuery UI对话框中呈现，如下所示：

在Jquery对话之外：

内部Jquery对话框：

代码：

HTML：

<div class="form-group"> 
  <div class="col-sm-8">
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="increment_FILEALERTMINS">
          <i class="glyphicon glyphicon-plus">
                        </i>
        </button>
      </div>
      <input type="number" class="form-control" required id="FILEALERTMINS" name="FILEALERTMINS" placeholder="Enter FILEALERTMINS"/>
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="decrement_FILEALERTMINS">
          <i class="glyphicon glyphicon-minus">
                        </i>
        </button>
      </div>
    </div>
  </div>
</div>

JS：

$(function() {
  $(".form-group").dialog(); // comment this out to see it working properly!
})

可重复的小提琴：

https://jsfiddle.net/sajjansarkar/qr2zc4nj/

Answer 1

这里发生了多个问题：

您尝试创建的表单类型的Bootstrap结构不完整。
您正在绑定dialog()上的jQuery UI .form-group-element插件，它会在其上添加jQuery UI CSS并打破样式。
jQuery UI和Bootstrap之间存在冲突的样式。

前两个很容易解决：

在整个HTML（form-horizontal in Bootstrap）

.form-horizontal

将整个代码换成另一个代码，无样式div并在其上绑定dialog()（例如：$('#myForm').dialog()）。

对于第三个，你必须编写自定义CSS来撤消jQuery UI正在做的事情。

您需要重置右键大小，这可以通过执行以下操作来实现：

.ui-widget button.btn {
  font-size: 14px;
}

并将容器宽度设置为100％（jQuery UI在初始化dialog()时附加固定宽度（以像素为单位））：

#myForm {
  width: 100% !important;
}

不幸的是，您必须保持!important，因为它是覆盖内联样式的唯一方法。

最后，您可能希望在对话框中添加width选项。你的标签很长，你需要对话框最初更宽，所以输入不会重叠。

$("#myForm").dialog({
  width: 700
});

这里是working JSFiddle。

根据经验，我总是尽量避免混合可能具有冲突风格的插件。 jQuery UI带有样式，并且它在Bootstrap中不能很好地工作。如果您想保持应用干净，请尝试查看Bootstrap自己的对话框：Modals。

Answer 2

您可以使用解决方案https://jsfiddle.net/qr2zc4nj/2/

$(function(){
  $(".form-group").dialog();
})

.glyphicon{
  font-size: 20px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="form-group">
  <label class="control-label col-sm-3" for="FILEALERTMINS">
    FILEALERTMINS:
  </label>
  <div class="col-sm-8">
    <div class="input-group">
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="increment_FILEALERTMINS">
          <i class="glyphicon glyphicon-plus">
						</i>
        </button>
      </div>
      <input type="number" class="form-control" required id="FILEALERTMINS" name="FILEALERTMINS" placeholder="Enter FILEALERTMINS"/>
      <div class="input-group-btn">
        <button class="btn btn-default" data-type="decrement_FILEALERTMINS">
          <i class="glyphicon glyphicon-minus">
						</i>
        </button>
      </div>
    </div>
  </div>
</div>

您需要将font-size添加到。glyphicon。

希望这会对你有所帮助。

Bootstrap输入组在jQuery UI对话框中无法正确呈现

2 个答案: