Ich habe eine Tabelle von Datensätzen, die schön in einer HTML-Tabelle angezeigt wird. Die letzte Spalte dieser Tabelle zeigt ein Symbol an, wenn Sie die Zeile anzeigen. Wenn der Benutzer das Symbol bewegt, erscheint ein Dropdown-Menü für alle Aktionen, die sich auf diese Zeile beziehen.CSS Dropdown-Menü Relativ zu einem TD in einer Tabelle
Derzeit habe ich die td, dass Icon in Position:absolute gesetzt ist und das div des Dropdown-Menüs ist auch auf absolute Position gesetzt.
Dies bedeutet, dass ich die Dropdown-Menü-Div ausrichten kann, um sich gut an die Zeile anzupassen, die es betrifft.
Erstens bin ich nicht ganz sicher, warum das der Fall ist. Ich hätte gedacht, dass ich den TD als Absolute und die Menüdiv als Relative brauchen würde, aber das ist einfach nicht der Fall.
Das aktuelle Problem, das ich derzeit habe (so wie ich es über den gesamten Browser funktioniert) ist, dass wenn die Zeile erweitert wird, doppelte Höhe von Text in anderen Spalten zu sein. Das TD mit absoluter Positionierung erweitert sich nicht auf 100% Höhe des TR. Was Probleme verursacht, wenn Sie versuchen, den tr zu schweben, und Sie bewegen sich dorthin, wo der letzte TD, der sich auf die Zeilenhöhe hätte ausdehnen sollen, und es als einen Schwebeflug auf dem TR registriert.
Irgendwelche Ideen, um das zu umgehen? Das Problem mit dem Setzen des Symbols in einem div, das relativ ist, ist, dass ich das div zu 100% Höhe/Breite des td brauche, um in der Lage zu sein, das Menü richtig auf die Reihe auszurichten!
BEARBEITEN: Wie angefordert Einige Html ... Dies ist eine Vorlage für den Schnurrbart. Sollte nicht schwer zu folgen, auch wenn Sie es nie verwendet haben
<table>
<thead>
<tr>
<th style="width:15px"><input type="checkbox" class="GridSelectAll" onclick="GridSelectAll(this);" /></th>
<th class="tar" style="width:30px">
<a href="javascript:SortGrid('EmployeeId')" id="headerEmployeeId">
<%= GetTranslation("EmployeeId") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('FirstName')" id="headerFirstName">
<%= GetTranslation("FirstName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:120px">
<a href="javascript:SortGrid('LastName')" id="headerLastName">
<%= GetTranslation("LastName") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th>
<a href="javascript:SortGrid('CompanyName')" id="headerCompanyName">
<%= GetTranslation("PrimayCompanyName") %><span class="sortArrow ui-icon" ></span>
</a>
</th>
<th style="width:55px">
<a href="javascript:SortGrid('EmployeeRowStatus')" id="headerEmployeeRowStatus">
<%= GetTranslation("EmployeeRowStatus") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:60px">
<a href="javascript:SortGrid('IsLocked')" id="headerIsLocked">
<%= GetTranslation("IsLocked") %><span class="sortArrow ui-icon"></span>
</a>
</th>
<th style="width:15px"></th>
</tr>
</thead>
<tbody>
{{#EmployeeSummaries}}
<tr>
<td><input type="checkbox" class="chkRowId" value="{{EmployeeId}}" /></td>
<td class="tar">{{EmployeeId}}</td>
<td>{{FirstName}}</td>
<td>{{LastName}}</td>
<td>{{PrimaryCompanyName}}</td>
<td>{{EmployeeRowStatus}}</td>
<td>{{IsLocked}}</td>
<td style="position:absolute;">
<a class="optlink"><span class="ui-icon ui-icon-triangle-1-s"></span></a>
<div class="optmenu">
<ul>
<li><a onclick="UpdateEmployee_LoadDialog({{EmployeeId}});"><%= GetTranslation("ManageEmployee")%></a></li>
<li><a onclick="showLoading();" href="../Core/AuditItem.aspx?{{ItemTypeItemIdQuerystring}}"><%= GetTranslation("ViewHistory")%></a></li>
<li><a onclick="showLoading();" href="UserGroupsEvo.aspx#/?PageIndex=0&Filter=EmployeeId~EqualTo~{{EmployeeId}}"><%= GetTranslation("ViewUserGroups")%></a></li>
<li><a onclick="showLoading();" href="UserGroup_Employees.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManageUserGroups")%></a></li>
<li><a onclick="showLoading();" href="../Employee/EmployeePreferences.aspx?{{EmployeeIdQuerystring}}"><%= GetTranslation("ManagePreferences")%></a></li>
<li><a onclick="ResetPasswords_LoadDialog({{EmployeeId}});"><%= GetTranslation("ResetPassword")%></a></li>
<li><a onclick="SendWelcomeEmails_LoadDialog({{EmployeeId}});"><%= GetTranslation("SendWelcomeEmail")%></a></li>
<li><a onclick="AddEmployee_Company_LoadDialog({{EmployeeId}}, {{PrimaryCompanyId}});"><%= GetTranslation("AddToCompany")%></a></li>
<li><a onclick="LoginAsUser({{EmployeeId}});"><%= GetTranslation("LoginAsUser") %></a></li>
{{#HasOtherCompanies}}
<li class="subheader"><%= GetTranslation("ManageOtherCompanies") %></li>
{{/HasOtherCompanies}}
{{#Companies}}
<li>
<span style="vertical-align:top;" class="hh ui-icon ui-icon-circle-close" onclick='RemoveEmployeeFromCompany_LoadDialog(this, {{EmployeeId}}, {{CompanyId}}, "{{CompanyName}}");return false;' title="<%= GetTranslation("Remove") %>"></span>
<a onclick="ManageEmployee_Company_LoadDialog({{EmployeeId}}, {{CompanyId}});">
{{CompanyName}}
</a>
</li>
{{/Companies}}
</ul>
</div>
</td>
</tr>
{{/EmployeeSummaries}}
</tbody>
</table>
Könnten Sie einige Beispiel-Code posten? Ein bisschen schwer mit nur Beschreibungen zu folgen. – Travesty3
jetzt zur Verfügung gestellt ... .optlink span ist das Symbol und .optmenu ist das Dropdown-div, das an Ort und Stelle erscheinen sollte – Steve
Haben Sie versucht, die 'td' Position: relativ? – Travesty3