Ajax日历在单击时显示额外的空格/条

时间:2014-05-15 21:31:34

标签: jquery asp.net ajax visual-studio calendar

我在visual studio中使用AJAXToolKit日历。当我点击日历图标时,日历会弹出,但是当图像3中的日历消失后,也会弹出一个明显的线条或条带,一旦两个日期都被选中,则附加线条会消失。我不希望弹出这一行。我找不到它是不成功的。 这就是我所做的:

<td valign="middle" class="inlineChildren textcenter">
<asp:Label id="Show" runat="server" text="Show" />

    <asp:DropDownList ID="ddlShowDays" CssClass="ddlShowDays" runat="server" OnSelectedIndexChanged="ddlShowDays_SelectedIndexChanged" AutoPostBack="true">
        <asp:ListItem Value="" Text=""/>
        <asp:ListItem Value="1" Text="1 day"/>
        <asp:ListItem Value="7" Text="7 days"/>
        <asp:ListItem Value="14" Text="14 days" Selected="True"/>
        <asp:ListItem Value="21" Text="21 days"/>
        <asp:ListItem Value="30" Text="30 days"/>
        <asp:ListItem Value="60" Text="60 days"/>
        <asp:ListItem Value="90" Text="90 days"/>
    </asp:DropDownList>
    <span id="pnlDateFrom" runat="server">
    <asp:Label id="lblShowFrom" runat="server" text="from" />

    <asp:TextBox ID="txtDateFrom" runat="server" Width="6em" MaxLength="10" ToolTip="Example: 1/13/1956" AutoPostBack="true" />
    <ajax:CalendarExtender   PopupPosition= "TopRight" CssClass= "ajax__calendar_container" Animated="false" Enabled="true" EnabledOnClient="true" runat="server" ID="calDateFrom" TargetControlID="txtDateFrom" PopupButtonID="imgCalendarDateFrom"/>

    <asp:ImageMap runat="server" ID="imgmapDateFrom" ImageUrl="~/images/spinner.gif" OnClick="imgmapDateX_Click">
    <asp:RectangleHotSpot Top="0" Bottom="7" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="up"/>
    <asp:RectangleHotSpot Top="8" Bottom="15" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="dn"/>
    </asp:ImageMap>

    <asp:Image CssClass="imageLink" ID="imgCalendarDateFrom" runat="server" ImageUrl="~/images/calendar.gif" ToolTip="Choose date from a calendar" />


    </span>
    <span id="panelDateTo" runat="server">
    <asp:Label id="lblShowTo" runat="server" text="to" />
    <asp:TextBox ID="txtDateTo" runat="server" Width="6em" MaxLength="10" ToolTip="Example: 1/13/1956" AutoPostBack="true" />
    <ajax:CalendarExtender   PopupPosition= "TopLeft" CssClass= "ajax__calendar_container"  Animated="false" Enabled="true" EnabledOnClient="true" runat="server" ID="calDateTo" TargetControlID="txtDateTo" PopupButtonID="imgCalendarDateTo"/>

    <asp:ImageMap runat="server" ID="imgmapDateTo" ImageUrl="~/images/spinner.gif" OnClick="imgmapDateX_Click">
    <asp:RectangleHotSpot Top="0" Bottom="7" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="up"/>
    <asp:RectangleHotSpot Top="8" Bottom="15" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="dn"/>
    </asp:ImageMap>

    <asp:Image CssClass="imageLink" ID="imgCalendarDateTo" runat="server" ImageUrl="~/images/calendar.gif" ToolTip="Choose date from a calendar" />
    </span>
</td>

<style>
.ajax__calendar_container  
{
  z-index : 1000 ; 
  background-color : Aqua;
 }
.ajax__calendar {
    position: relative;
    left: 0px !important;
    top: 0px !important;
    visibility: visible; display: block;
 }
</style>

以下是相同截图的链接 “https://www.dropbox.com/sh/ldx1aaq29vuxaoy/AAA5VpilqhpruMqgRiEDzIcKa

感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:0)

我弄清楚问题是什么。所以我想我会回答我自己的问题。

我在我的代码中复制了ajax_calendar_container,就像在Firefox中使用firebug看到的一样。当我删除了cssClass =&#39; ajax_calendar_container&#39;来自ajax:CalendarExtender并从它应该工作的样式中删除了相应的代码。

    <td valign="middle" class="textcenter">
    Show 
    <asp:DropDownList ID="ddlShowDays"  runat="server" OnSelectedIndexChanged="ddlShowDays_SelectedIndexChanged" AutoPostBack="true">
        <asp:ListItem Value="" Text=""/>
        <asp:ListItem Value="1" Text="1 day"/>
        <asp:ListItem Value="7" Text="7 days"/>
        <asp:ListItem Value="14" Text="14 days" Selected="True"/>
        <asp:ListItem Value="21" Text="21 days"/>
        <asp:ListItem Value="30" Text="30 days"/>
        <asp:ListItem Value="60" Text="60 days"/>
        <asp:ListItem Value="90" Text="90 days"/>
    </asp:DropDownList>
    <span id="pnlDateFrom" runat="server">
    <asp:Label id="Label1" runat="server" text="from"   />
    <asp:TextBox ID="txtDateFrom" runat="server" Width="6em" MaxLength="10" ToolTip="Example: 1/13/1956" AutoPostBack="true" />
    <ajax:CalendarExtender PopupPosition="TopRight" Animated="false" Enabled="true" EnabledOnClient="true" runat="server" ID="calDateFrom" TargetControlID="txtDateFrom" PopupButtonID="imgCalendarDateFrom"  BehaviorID="calendarFrom"  />


    <asp:ImageMap runat="server" ID="imgmapDateFrom" ImageUrl="~/images/spinner.gif" OnClick="imgmapDateX_Click" >
    <asp:RectangleHotSpot Top="0" Bottom="7" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="up" />
    <asp:RectangleHotSpot Top="8" Bottom="15" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="dn"/>
    </asp:ImageMap>

    <asp:ImageButton CssClass="imageLink" ID="imgCalendarDateFrom" runat="server" ImageUrl="~/images/calendar.gif" ToolTip="Choose date from a calendar"  />



    &nbsp; 
    </span>
    <span id="pnlDateTo" runat="server">
    <asp:Label id="lblShowTo" runat="server" text="to" />
    <asp:TextBox ID="txtDateTo" runat="server" Width="6em" MaxLength="10" ToolTip="Example: 1/13/1956" AutoPostBack="true" />
    <ajax:CalendarExtender PopupPosition="TopLeft"  Animated="false" Enabled="true" EnabledOnClient="true" runat="server" ID="calDateTo" TargetControlID="txtDateTo" PopupButtonID="imgCalendarDateTo" BehaviorID="calendarTo"  />

    <asp:ImageMap runat="server" ID="imgmapDateTo" ImageUrl="~/images/spinner.gif" OnClick="imgmapDateX_Click"  >
    <asp:RectangleHotSpot Top="0" Bottom="7" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="up"/>
    <asp:RectangleHotSpot Top="8" Bottom="15" Left="0" Right="20" HotSpotMode="PostBack" PostBackValue="dn"/>
    </asp:ImageMap>

    <asp:ImageButton CssClass="imageLink" ID="imgCalendarDateTo" runat="server" ImageUrl="~/images/calendar.gif" ToolTip="Choose date from a calendar"  AlternateText="Click to show calendar" />
    &nbsp;
    </span>
</td>
    <style>
     .... removed code
    </style>

以下是截图的链接,包括使用firebug查找更改。Duplicate container found using firebug

希望这可以帮助其他人面对同样的问题!