Calendar Extender отображается неправильно

Я использую на своей странице элемент управления расширением календаря ajax, и, хотя блок расширения отображается правильно, его содержимое не отображается:

Снимок экрана CalendarExtender

Вот код, который я использую, чтобы записать его на страницу:

<table class="tblForm">
    <tr>
        <td valign="top">
            <asp:TextBox runat="server" ID="txtPickupDate" AutoPostBack="true"></asp:TextBox>
            <aj:CalendarExtender runat="server" ID="calPickup" TargetControlID="txtPickupDate" Format="yyyy-MM-dd">
            </aj:CalendarExtender>
        </td>
    </tr>
</table>

Нет никаких правил стиля, применяемых непосредственно к CalendarExtender, но у меня есть этот CSS, который может иметь значение:

.tblForm
{
    display: block;
}
.tblForm td
{
    width: 245px;
    float: left;
}

Кто-нибудь видел это раньше? Кто-нибудь знает, что это может быть?

Заранее благодарю за любую помощь!

РЕДАКТИРОВАТЬ
Я попытался удалить поплавок, и хотя это исправляет CalendarExtender, он также сдвигает каждую ячейку в таблице контейнера с нарушением выравнивания. Я также пробовал установить clear: both; в CalendarExtender, но из-за этого фон пропадает.


asp.net-ajax calendarextender
person Ortund    schedule 27.08.2012    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Ладно разобрался :)

Проблема возникла с этим CSS для ячеек таблицы. Изменение ширины ячеек также изменило ширину ячеек в таблице, которая записывается с помощью Calender Extender.

Чтобы обойти это, я удалил все числа с плавающей запятой в таблице и ее дочерние элементы и объявил новый класс, чтобы установить ширину, которую я затем пропустил в ячейке, содержащей календарь:

.tblForm 
{
    display: block;
}
.tblForm tr.wider td, tblForm .wider
{
    width: 245px;
}
person Ortund    schedule 07.09.2012
comment
@MayankPathak Это решено, спасибо :) Ваш вопрос заставляет меня задуматься, достаточно ли ясен ответ ... - person Ortund; 13.09.2012

arrow_upward
3
arrow_downward

У меня были аналогичные проблемы с расширителем календаря внутри объекта ListView. Пятница и суббота всегда были обрезаны из-за проблем со стилем. В конечном итоге я обошел это, обернув мои расширители календаря (включая текстовое поле и изображение) и назначив им стиль, который переопределяет CSS моей таблицы.

#calendarContainerOverride table
{
    width:0px;
    height:0px;
}

#calendarContainerOverride table tr td
{
    padding:0;
    margin:0;
}

Затем примените идентификатор здесь:

<tr id="calendarContainerOverride">
  <td style="padding-top:10px">    
    <asp:TextBox ID="txtStart" runat="server" %>' />
    <asp:CalendarExtender ID="extender" runat="server" Enabled="True" TargetControlID="txtStart" PopupButtonID="imgCalendarStart" />
    <asp:Image ID="imgCalendarStart" ImageUrl="~/Images/Calendar.png" runat="server"/>
  </td>
</td>

С помощью этого метода вам не нужно менять стиль для всех ваших таблиц, а просто сосредоточиться на надоедливом календаре.

person MadHenchbot    schedule 31.10.2012