Как исправить проблему с изменением размера средства выбора даты?
Я настраиваю новый плагин datepicker в своем проекте laravel.
и хотите исправить проблему с реакцией при изменении размера для мобильного просмотра
это мои коды настройки, которые я выбираю из списка предложений создателя datepicker на его сайте:
$(function() {
$("#input1").persianDatepicker({
theme: 'melon',
alwaysShow: 1,
cellWidth: 36,
cellHeight: 20,
fontSize: 15,
calendarPosition: {
x: 0,
y: -93,
},
});
});
и это структура div, в которую я поместил datepicker:
<div class = "container-fluid">
<div class = "container">
<div class = "row my-4 justify-content-center">
<div class = "col-xl-3">
<div class = "card bg-light py-4 mb-3">
<div class = "bg-light py-5">
<div class = "py-5 bg-light">
<div id = "input1"></div>
</div>
</div>
</div>
<div class = "card bg-primary py-4"></div>
<div class = "card bg-primary py-4"></div>
</div>
<div class = "col-xl-9">
</div>
</div>
</div>
</div>
в представлении ноутбука у меня есть изображение ниже:
и в мобильном представлении (iphone 6/7/8) у меня есть изображение ниже:
так что я думаю, вы можете понять, в чем моя проблема
проблема в том, что когда кто-то открывает мою страницу в мобильном телефоне, календарь уходит влево, и я не знаю
как указать, что окно календаря соответствует размеру родительского элемента div и всегда соответствует размеру и полному размеру внутри родителя, например
вид с ноутбука
Для получения дополнительной информации это издатель этого плагина:
Датапикер
У вас есть ширина: 100% на нем?
на где, пожалуйста, скажите мне точно точку?
Какой элемент вашего календаря?
#input1 — это ваш элемент, который не растягивается до конца, верно?
да, я хочу, чтобы календарь (input1) растягивался до своего родителя во всех размерах
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Добавьте этот css:
#input1 {
width: 100%;
}
или вы можете сделать это так:
<div id = "input1" style = "width:100%;"></div>
Наденьте на себя элемент <div class = "py-5 bg-light">. Я не знаю, какой у вас календарь. Осмотрите его, как на картинке, и найдите элемент, ширина которого не равна 100%.
Вы имеете в виду, должен ли я установить ширину: 100% для всех div?
Вы хотите поместить его в div, который должен быть на 100%, а не на все.
Попробуйте добавить этот CSS.
// only apply style on mobile
@media only screen and (max-width: 320px) {
.pdp-default {
// Set calendar parent element to 100% width
width: 100%;
// Override inline left position set by plugin
left: 0!important;
}
.pdp-default .cell {
// set percent width of calendar date cells 7/100 = 14.28571428571429
width: 14.28571428571429%!important;
// Style calendar dates to stay at required aspect ratio
height: 0!important;
padding-bottom: 8%;
}
}
кое-что изменилось: в размерах iphone 5/SE календарь растягивается на весь экран слева и справа! не для родительского div ... календарь растягивается по ширине и прилипает к левому и правому экрану
Добавьте position:relative; к родительскому div.
Извините, я только что заметил, что плагин добавляет HTML для календаря перед концом закрывающего тега body. Это означает, что на самом деле он не находится внутри вашей структуры DIV, поэтому вы не сможете добиться того, чего хотите, с помощью CSS. Вам нужно будет узнать, как получить ширину родительского элемента и применить ее к родительскому элементу календарей с помощью собственного javascript.
да, именно в конце проверки я мог видеть календарь в формате html, но я не знал, для чего это нужно, и теперь вы понимаете ... tnx, но я не знаю javascript, так что мне делать?
К сожалению, вам нужно будет использовать javascript. Единственным другим решением было бы иметь ширину вашего родительского div 100% на мобильном телефоне (что довольно нормально делать на мобильном телефоне) и применять только CSS, который я предоставил на мобильном телефоне, поэтому по умолчанию календарь будет иметь нормальный размер на планшете и рабочем столе.
я удаляю ваш код из css и добавляю ширину: 100% в html с помощью javascript div (режим проверки) и что-то изменилось: ширина календаря приклеивается справа от экрана! но левая сторона была хорошей и точно была на родительской границе, так что даже если я сделал это в javascript, это произойдет, так что дальше?
Вам также нужно будет получить позицию родительского div. Однако это становится слишком сложным для чего-то, что можно решить, настроив макет на мобильном устройстве. Я не думаю, что смогу чем-то еще помочь, потому что трудно дать точное решение, не видя работающую версию вашего кода, и у меня нет времени на локальную настройку плагина. Прости.
да, я знаю это, но позиционирование просто решает мою проблему в обычном режиме, а в мобильном представлении изменилось также причина того, что левая сторона находится точно на родительской границе, моя позиция установлена ... хорошо, спасибо за руководство, может быть, у кого-то еще есть время помочь меня, потому что все готово к работе, я связал загрузку адреса плагина ... Удачи, братан
Ваши фото не отображаются?