Bootstrap DateTimePicker отображает неправильно

Question

У меня проблема с datetimepicker. Мой календарь отображается неправильно в Chrome, хотя в Edge все в порядке. Вот скриншот из Chrome:

А вот скриншот с Edge:

Я работаю над проектом ASP.NET Core MVC и вот мой код из представления:

<div class="wrap-input100 validate-input" data-validate="Required field">
                        <input type="text" class="form-control" id="AppointmentDate" name="date" placeholder="date">
                        <span @*class="focus-input100"*@></span>
                    </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>

<script>
$(document).ready(function() {
    var date_input = $('input[name="date"]'); //our date input has the name "date"
    var options = {
        format: 'mm/dd/yyyy',
        todayHighlight: true,
        autoclose: true,
        language: 'arm'
    };
    date_input.datepicker(options);
});

</script>

Answer 1

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

#yourmaindiv{
 width: -webkit-fit-content;
 width: -o-fit-content;
 width: -moz-fit-content;
 width: fit-content;
}

Привет.