Проблема выравнивания надстройки кнопки ввода CSS Boostrap

Прикрепленное изображение показывает, что моя кнопка выбора даты не касается ввода внутри модального окна начальной загрузки. Я просмотрел css в инструментах разработчика Chrome и не нашел ничего существенного. Я думал, что это может быть проблема с группой ввода внутри группы форм. Любые идеи относительно того, что происходит?

Код:

<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; }

Как я могу переопределить это для этого конкретного модального представления?


jquery css twitter-bootstrap twitter-bootstrap-3
person tshoemake    schedule 31.12.2016    source источник
comment
создайте скрипку, это может помочь нам ответить на этот вопрос   -  person Afsar    schedule 31.12.2016
comment
это лучшее, что я мог сделать jsfiddle.net/b3c6xd6s   -  person tshoemake    schedule 31.12.2016

Ответы (3)


arrow_upward
1
arrow_downward

Я думаю, у вас есть какой-то CSS, который мы не можем видеть, изменяя ширину ввода. Элемент значка находится справа, потому что именно там он и должен быть. Элементы формы Bootstrap по умолчанию имеют ширину 100%:

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

У вас должно быть что-то, влияющее на ширину ввода, и это проблема.

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

person Serg Chernata    schedule 31.12.2016
comment
Я нашел другой css, который влияет на это... Site.css имеет этот код: input, select, textarea { max-width: 280px; } - person tshoemake; 01.01.2017
comment
Как я могу переопределить это? - person tshoemake; 01.01.2017

arrow_upward
0
arrow_downward

Вы используете jQuery ui datepicker.

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

Эта строка css неверна:

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

Вместо этого попробуйте использовать beforeShow:

Для проблемы с выравниванием вам нужно создать свидетельство с помощью скрипки или добавить свой css.

Фрагмент:

$(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();
<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>

person gaetanoM    schedule 31.12.2016

arrow_upward
0
arrow_downward

Это был ответ: неизвестно пробел перед input-group-addon в шаблоне asp.net mvc 5 по умолчанию

Я прокомментировал свой 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 дня это выглядело так: введите здесь описание изображения

person tshoemake    schedule 02.01.2017