Question

附加的图像显示我的datepicker按钮没有触及bootstrap模式内的输入。我在chrome dev工具中查看了css并且找不到任何重要的东西。我认为这可能是表单组内输入组的问题。关于最新情况的任何想法？

代码：

<script>
    $(document).on("click", ".modal-body", function () {
        $("#datepicker").datepicker();
        $('#btn').click(function () {
            $("#datepicker").focus();
        });
    });
</script>

<div id="calendarModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Add Reminder:</h3>
            </div>
            <div class="modal-body">
                <h4 id="modal-date"></h4><br />
                <form>
                    <div class="form-group">
                        <label for="reminderTitle" class="control-label">Title:</label>
                        <input type="text" class="form-control" id="reminderTitle">
                    </div>
                    <div class="form-group">
                        <label for="datepicker" class="control-label">Date/Time:</label>
                        <div class="input-group">
                            <input type="text" id="datepicker" class="form-control" placeholder="Select Date" />
                            <span class="input-group-addon" id="btn">
                                <i class="fa fa-calendar-o"></i>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="reminderComments" class="control-label">Comments:</label>
                        <textarea class="form-control" id="reminderComments"></textarea>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveModal()">Save</button>
            </div>
        </div>
    </div>
</div>

<style>
    #datepicker {
        z-index: 9999 !important;
    }
</style>

更新

我找到了影响它的另一个css ... Site.css有这个代码：

input, select, textarea { max-width: 280px; }

如何为这个特定的模态视图覆盖这个？

Answer 1

我认为你有一些我们看不到改变输入宽度的CSS。图标元素一直向右，因为它应该是它的位置。 Bootstrap表单元素默认为100%宽度：

.form-control {
    display: block;
    width: 100%;
    ...
}

你必须有一些影响输入宽度的东西，这就是问题所在。

https://jsfiddle.net/b3c6xd6s/1/

Answer 2

您正在使用jQuery ui datepicker。

我立即看到的问题是你如何在出现时尝试定位日期选择器。

这条css行错了：

#datepicker {
    z-index: 9999 !important;
}

而是尝试使用beforeShow：

对于对齐问题，您需要使用小提琴或添加CSS来创建证据。

摘录：

＆＃13;

$(document).on("click", ".modal-body", function () {
  $("#datepicker").datepicker({
    beforeShow: function(input, inst)
    {
      $(input).css("z-index", "999999");
      inst.dpDiv.css({top: ($("#datepicker").offset().top / 2)+ 'px', marginLeft: '0px'});
    }
  });
  $('#btn').click(function () {
    $("#datepicker").focus();
  });
});


// open the modal....
  $("#calendarModal").modal();

＆＃13;

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="calendarModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Add Reminder:</h3>
            </div>
            <div class="modal-body">
                <h4 id="modal-date"></h4><br />
                <form>
                    <div class="form-group">
                        <label for="reminderTitle" class="control-label">Title:</label>
                        <input type="text" class="form-control" id="reminderTitle">
                    </div>
                    <div class="form-group">
                        <label for="datepicker" class="control-label">Date/Time:</label>
                        <div class="input-group">
                            <input type="text" id="datepicker" class="form-control" placeholder="Select Date" />
                            <span class="input-group-addon" id="btn">
                                <i class="fa fa-calendar-o"></i>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="reminderComments" class="control-label">Comments:</label>
                        <textarea class="form-control" id="reminderComments"></textarea>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveModal()">Save</button>
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 3

这就是答案：unknown gap before input-group-addon in default asp.net mvc 5 template

我在这里注释了我的site.css：

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

并补充说：

.input-group { max-width: 280px; }

在将近2天之后最终成功，看起来像这样：

Boostrap css输入按钮插件对齐问题

3 个答案: