1

我正在处理这个 asp.net mvc 3 视图，我使用自定义 jQuery 日历让用户选择搜索日期。问题是我无法完全按照我想要的方式显示日历。我对 CSS 有非常基本的了解，但日历是绝对位置的，所以据我了解，我需要一个父元素来定位。所以我决定为我的下拉菜单和文本框使用表格，所有这些都是不同的搜索选项。我尝试过的一件事是：

@using (Html.BeginForm())
{
    var dateID = "jc_dateBefore";
    var calParent = "jcalendar_parentBefore";
    <table>
    <tr>
        <td>
            @Html.DropDownList("kkcId", (SelectList)ViewBag.KKCNames, "Изберете ККС", new { @class = "validateClassKKCType" })
        </td>
        <td>
            @Html.DropDownList("UserId", (SelectList)ViewBag.UserNames, "Изберете Потребител", new { @class = "validateClassKKCType" })   
        </td>
        <td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>
        <td>
            @Html.DropDownList("statusId", (SelectList)ViewBag.Status, "Изберете Статус", new { @class = "validateClassKKCType" })
        </td>
        <td>
            <input type="submit" value="Search" />
        </td>
    </tr>
    </table>
}

即使我几乎可以肯定这是纯 CSS 问题，我还是粘贴了整个代码，与此处使用的其他技术无关。所以特定于日历的代码是这个片段：

<td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>

当我使用上面的内容时，我得到了这个结果：

日历

当我需要它位于左侧文本框下方时，日历位于右侧下拉列表下方，这实际上是用户选择日期时显示日期的位置。

如果我像这样更改代码段的代码：

<td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>

把它全部放在一个<td>元素中，然后我得到这个：

日历 2

这几乎是我想要的，但你可以看到文本框略低于其他元素。如果我从<img>标签中删除边距，那么文本框就会恢复原位，但日历图像会丢失正确的位置。

这是日历的 CSS：

.jcalendar_parent{
    z-index: 999;
    position: absolute;
}

任何想法如何正确显示我的元素？另外，我使用 table 因为这是我唯一能想到的，但根本不必使用它。如果有更好的方法，请提出。

附言

我不认为这是一个解决方案，但这似乎目前可行：

 <td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999;"></div>
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
        </td>

像这样将元素放在表中，我得到了这个：

日历WA

这是在浏览器上为日历呈现的 HTML：

<td>
            <input class="jc_dateBefore" id="jc_dateBefore" name="selDate" type="text" value="Изберете Дата" />
            <div id="jcalendar_parentBefore" class="jcalendar_parent" style="z-index: 999;"></div>
        </td>
        <td>
            <img onclick="viewCalendar('jcalendar_parentBefore', 'jc_dateBefore')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
        </td>
4

1 回答 1

1

例子

这是一个similar example

输入间距

生成日历的 Javascript 可能会引入一个将输入框向下推并导致空格的元素，或者您遇到垂直对齐问题：

日历 2

日历定位

在 CSS 中，如果一个对象是使用position: relative;orposition: absolute;定位的，那么它将根据它最近的positioned 父级来定位。

你<td>的，你的日历的父元素，应该设置为position: relative;

.parent { position: relative; }

然后您可以控制日历的位置：

.jcalendar {
  top: 10px;
  left: 0;
}

请注意： .jcalendar只是一个示例类。我不确定您使用的是哪个 javascript 日历实现，因此请检查您应该定位的类名（使用浏览器检查器）。

于 2013-05-28T10:54:41.663 回答