Элемент управления календарем asp.net отображается под текстовым полем

Question

Я использую кнопку изображения для отображения календарного элемента управления asp.net (этот элемент управления поставляется с VS 2008). Однако, когда я нажимаю кнопку изображения, элементы управления календарем отображаются «под» текстовым полем, которое предполагается заполнить. Как заставить элемент управления отображаться в правой части текстового поля?

Мой код:

                         <asp:ImageButton ID="imgCalendar" runat="server" Height="17px" 
                         ImageUrl="~/Images/CAL.gif" 
                         onclick="imgCalendar_Click1" Width="19px" 
                         Visible="true" ImageAlign="Middle" />
                     <asp:Panel ID="Panel1" runat="server">
                         <asp:Calendar ID="calStartDate" runat="server" BackColor="Transparent" 
                             BorderColor="#FFCC66" BorderWidth="1px" DayHeaderStyle-BackColor="gainsboro" 
                             DayNameFormat="Shortest" FirstDayOfWeek="Monday" Font-Bold="True" 
                             Font-Names="Verdana" Font-Size="8pt" ForeColor="Gray" Height="102px" 
                             OnSelectionChanged="calStartDate_SelectionChanged" 
                             OtherMonthDayStyle-ForeColor="gray" SelectedDayStyle-BackColor="Navy" 
                             SelectedDayStyle-Font-Bold="True" SelectorStyle-BackColor="gainsboro" 
                             ShowGridLines="True" TitleStyle-BackColor="gray" TitleStyle-Font-Bold="True" 
                             TitleStyle-Font-Size="12px" TodayDayStyle-BackColor="gainsboro" Visible="False" Width="62px">
                             <SelectedDayStyle BackColor="#404040" Font-Bold="True" />
                             <TodayDayStyle BackColor="#3A080B" ForeColor="White" />
                             <SelectorStyle BackColor="#FFCC66" />
                             <OtherMonthDayStyle ForeColor="#CC9966" />
                             <NextPrevStyle Font-Size="9pt" ForeColor="#3A080B" />
                             <DayHeaderStyle BackColor="#3A080B" Font-Bold="True" Height="1px" ForeColor="White" />
                             <TitleStyle BackColor="#E0C16B" Font-Bold="True" Font-Size="9pt" ForeColor="#3A080B" />
                         </asp:Calendar>
                     </asp:Panel>

Answer 1

Вверху моей головы я бы предложил установить свойство CssClass для asp:Panel и расположить его с помощью CSS. HTML-код, сгенерированный элементом управления, скорее всего отображает элементы уровня блока (скорее всего, <div> или <table>), что приводит к его отображению в новой строке по умолчанию.

Попробуйте использовать display: inline или display: inline-block или float для позиционирования.

В зависимости от стиля оформления текстового поля вам может потребоваться изменить его стили, чтобы приспособить расположение календаря.

Answer 2

Добавить style = "float: right" в текстовое поле.