большой размер экстендера - PullRequest
1 голос
/ 13 октября 2010

Как я могу изменить размер calendarextender набора инструментов управления ajax, чтобы он был сенсорным, я успешно изменил свойства css, но при выборе месяцев или лет месяцы (или годы) перекрывают дни и не сжимаются после выбора.

Вот код, который я использую до сих пор:

.ajax__calendar_container {padding: 4px; позиция: абсолютная; курсор: по умолчанию; ширина: 450px; размер шрифта: 28px; текст-align: центр; семейство шрифтов: Tahoma, Verdana, Helvetica;z-индекс: 10000;} .ajax__calendar_body {высота: 360px; ширина: 450px; позиция: относительная; переполнение: скрытое; поле: авто;} .ajax__calendar_days {top: 0px; слева: 0px; высота: 360px; ширина: 450px; позиция: абсолютная; text-выровняйте: центр; поле: авто;visibility: visible;} .ajax__calendar_months {top: 0px; слева: 0px; ширина: 450px; позиция: абсолютная; выравнивание текста: по центру; поле: 0 0 -5px 0;отступ: 0 0 1px 0;Переполнение: скрытый; цвет фона: #ffffff;} .ajax__calendar_years {top: 0px; влево: 0px; ширина: 450px; позиция: абсолютная; выравнивание текста: по центру; поле: -10px; переполнение: скрытый;}

.ajax__calendar_container TABLE {font-size: 32px;} .ajax__calendar_header {высота: 40px; ширина: 100%;z-index: 1000;} .ajax__calendar_prev {курсор: указатель; ширина: 45px; высота: 45px; float: left; background-repeat: no-repeat; background-position: 50% 50%; background-image: url (<% = WebResource ("AjaxControlToolkit.Calendar.arrow-left.gif")%>); цвет фона: # D3DEEF;} .ajax__calendar_next {курсор: указатель; ширина: 45px; высота: 45px; число с плавающей точкой: справа; повторение фона: no-repeat; background-position: 50% 50%; background-image: url (<% = WebResource ("AjaxControlToolkit.Calendar.arrow-right.gif")%>); background-color: # D3DEEF;}.ajax__calendar_title {курсор: указатель; вес шрифта: полужирный;} .ajax__calendar_footer {высота: 33 пикс.справа; отступы: 0 4px -10px 0;} .ajax__calendar_day {font-size: 20px; высота: 51px; ширина: 54px; выравнивание текста: вправо; отступ: 0 4px; курсор: указатель;} .ajax__calendar_month {font-size: 18px; высота: 45px; ширина: 60px; выравнивания текста: центр; курсор: указатель;переполнение: скрытый;вертикальное выравнивание: среднее; поле: -1px 0 1px 0;} .ajax__calendar_year {размер шрифта: 18px; высота: 46px; ширина: 60px; выравнивание текста: центр; курсор: указатель; переполнение: скрытый;вертикальное выравнивание: среднее;}

.ajax_ calendar .ajax _calendar_container {border: 1px solid # 646464; цвет фона: #ffffff; цвет: # 000000;} .ajax_ calendar .ajax _calendar_footer {border-top: 1px solid # f5f5f5;} .ajax_ calendar .ajax _calendar_dayname {border-bottom: 1px solid # f5f5f5;} .ajax_ календарь .ajax _calendar_day {border: 1px solid # D3DEEF;} .ajax_ calendar .ajax _calendar_month {border: 1px solid # D3DEEF; цвет фона: #ffffff;} .ajax_ календарь .ajax _calendar_year {border: 1px solid # D3DEEF; цвет фона: #ffffff;}

.ajax_ calendar .ajax _calendar_active .ajax__calendar_day {background-color: # edf9ff; цвет границы: # 0066cc; цвет: # 0066cc;} .ajax_ calendar .ajax _calendar_active .ajax__calendar_month {background-color: # edf9ff; border-color: # 0066cc; цвет: # 0066cc;} .ajax_ calendar .ajax _calendar_active .ajax__calendar_year {цвет фона: # edf9ff; цвет границы: # 0066cc; цвет: # 0066cc;}

.ajax_ календарь .ajax _calendar_other .ajax__calendar_day {background-color: #ffffff; border-color: #ffffff; цвет: # 646464;} .ajax_ календарь.ajax _calendar_other .ajax__calendar_year {цвет фона: #ffffff; цвет границы: #ffffff; цвет: # 646464;}

.ajax_ календарь .ajax _calendar_hover .ajax__calendar_day {цвет фона: # edf9ff; цвет границы: # daf2fc; цвет: # 0066cc;} .ajax_ calendar .ajax _calendar_hover .ajax__calendar_month {цвет фона: # edf9ff; цвет границы: # daf2fc; цвет: # 0066cc;} .ajax_ calendar .ajax _calendar_hover .ajax__calendar_year {background-color: # edf9ff; border-color: # daf2fc; цвет: # 0066cc;}

.ajax_ календарь .ajax _calendar_hover .ajax__calendar_title {color: # 0066cc;} .ajax_ calendar .ajax _calendar_hover .ajax__calendar_today {color: # 0066cc;}

С этим стилем CSS я могу избежать наложения, но тогда месяцы и годы перестают быть достаточно большими и не заполняют весь экран. Кто-нибудь имел опыт работы с этим?

1 Ответ

1 голос
/ 25 июня 2011

У меня был очень похожий на этот вопрос вопрос, и в итоге я нашел почти больше взлома, чем решения.Но он работает великолепно и не вызывает у меня никаких проблем:

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

См. Отображение веб-страницы, удобной для мобильных устройств, без необходимости увеличения для получения справки по настройке начального увеличения.Кроме того, я обнаружил, что календарь, как правило, достаточно велик (на мой взгляд), если вы используете

<meta name="viewport" content="width = device-width" />

Да, вы на самом деле набираете «device-width», который запрашивает устройство, просматривающее вашу страницу дляего ширина и использовать его.

...