Почему в моем JPuery UI Datepicker значок отображается в отдельной строке?

Question

У меня есть JSFiddle:

https://jsfiddle.net/1pm0vsf3/1/

Я использую стандартную опцию, а именно buttonImage:

https://api.jqueryui.com/datepicker/

но значок моего календаря появляется в новой строке:

Как сделать так, чтобы значок моего календаря отображался на одной строке?

Answer 1

Добавьте это к вашему CSS:

.col-10::after {
  clear: both;
  content: ' ';
  display: block;
}
input.key-event-datepicker {
  float: left;
  margin-right: 5px;
}

Это добавляет плавающий эффект к вашему вводу, сообщая кнопке, что он может плавать рядом с вашим вводом.Элемент after на col-10 очищает float, поэтому он не влияет на высоту родительского контейнера.Возможно, вам все еще следует использовать более уникальный идентификатор для вашего col-10, так как теперь это добавит float-clear ко всем вашим col-10.Обновленная JS Fiddle: https://jsfiddle.net/obmajt1w/