Question

我试图将jquery datepicker输入文本放在绝对定位的div中。单击输入字段时不显示日期选择器日历，显然是因为日历div也是绝对定位的。如果我将父div的位置更改为relative，则显示选择器。但我要求div被定位为绝对的。解决方案是什么？

<ListBox Name="lbxListaZadan">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel xml:space="preserve" Orientation="Vertical">
                <TextBlock Text="{Binding title}" />
                <StackPanel Orientation="horizontal">
                    <TextBlock Text="Priorytet: " />
                    <TextBlock Text="{Binding priority}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

日期选择器代码：

<div id="createWizard" style="position:absolute !important">    
    <table height="100%" width="100%" style="height:100%;width:100%;background:transparent;" align="center" valign="center" cellpadding="5">
        <tr height="100%" style="width:100%">
            <td id="wayptsTray">
                <table height="100%" width="100%" valign="top">

                    <tr height="15%" id="StartTimeRow">
                        <td width="100%">
                            <table width="100%" height="100%" valign="middle">
                                <tr height="33.3%">
                                    <td align="left" colspan="2" nowrap>
                                        <span class="wizardHeader" id="routeStartTimeHeader">route time</span>  
                                    </td>
                                </tr>
                                <tr height="33.3%">
                                    <td align="left" width="50%" nowrap>
                                        <span class="wizardHeader" id="startDateHeader">date</span>
                                    </td>
                                    <td align="left" width="50%" nowrap>
                                        <span class="wizardHeader" id="startTimeHeader">time</span>
                                    </td>
                                </tr>
                                <tr height="33.3%">
                                    <td align="left" width="50%" nowrap>
                                        <!--div style="position:relative !important;width:100%;height:100%"-->
                                        <input type="text" class="litedark datepicker popupFrmArea datePickerInput datePickerText whitebg" name="startDate"  id="startDate" readonly="readonly"  style="margin-bottom:0px !important;width:85% !important;height:100% !important;"/>
                                        <font color="red" size="2" weight="300" style="width:15% !important;height:100% !important;text-align:left;">*</font>
                                        <!--/div-->
                                    </td>
                                    <td align="left" width="50%" nowrap>
                                        <input type="text" class="litedark popupFrmArea datePickerInput datePickerText whitebg" name="startTime"  id="startTime" readonly="readonly"  style="margin-bottom:0px !important;width:85% !important;height:100% !important"/>
                                        <font color="red" size="2" weight="300" style="width:15% !important;height:100% !important">*</font>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr height="65%" id="wayptsRow">
                        <td width="100%">
                        </td>
                    </tr>
                </table>
            </td>

        </tr>
    </table>
</div>

Answer 1

这可能会：

<table height="100%" width="100%" style="position: relative; height:100%;width:100%;background:transparent;" align="center" valign="center" cellpadding="5">

- 将position: relative;添加到表格样式中。在这种情况下，日期选择器将相对于表元素定位。

这可能是最好的，因为大多数人都希望日期选择器会在触发它的输入元素旁边弹出：

<td align="left" width="50%" nowrap>
    <div style="position:relative !important;width:100%;height:100%">
        <input type="text" class="litedark datepicker popupFrmArea datePickerInput datePickerText whitebg" name="startDate"  id="startDate" readonly="readonly"  style="margin-bottom:0px !important;width:85% !important;height:100% !important;"/>
        <font color="red" size="2" weight="300" style="width:15% !important;height:100% !important;text-align:left;">*</font>
    </div>
</td>

主要概念是一个绝对定位的元素使用具有相对位置作为参考的下一个祖先。

另外，请考虑使用<span>元素代替过时 <font>（某些浏览器可能无法识别），如下所示：

<span color="red" size="2" weight="300" style="width:15% !important;height:100% !important;text-align:left;">*</span>

绝对容器内的jquery datepicker

1 个答案: