the client want something like this. I can manage the styling (corners and all) but i can’t get the “dropdown” to drop under the text in the cell to the left. My html follows. Thanks in advance
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div.outside').hide();
$('div.selector').click(function () {
var hidden = $(this).parents('td').find('div.outside :hidden').length > 0;
$('div.outside').hide();
if (hidden) {
$(this).parents('td').find('div.outside').show().animate('slow');
} else {
$(this).parents('td').find('div.outside').hide().animate('slow');
}
});
});
</script>
<style type="text/css">
ul.action
{
list-style-type: none;
list-style-position: outside;
padding: 0px;
text-align: left;
margin: 0px;
}
ul li
{
margin: 1px 0px 1px 0px;
}
div.content
{
border-style: solid;
border-width: 1px;
padding: 1px;
white-space: nowrap;
overflow: auto;
}
div.outside
{
width: 200px;
position: absolute;
z-index: 100;
}
div.top
{
width: 200px;
}
div.selector
{
cursor: pointer;
padding: 1px 1px 0px 1px;
float: right;
border-style: solid;
border-width: 1px;
border-bottom-style: solid;
top: 2px;
position: relative;
}
.popup-dropdown
{
background-color: #FFFFE1;
}
thead td
{
font-weight: bold;
width: 100px;
}
</style>
<title></title>
</head>
<body>
<table>
<thead>
<tr>
<td>
Name
</td>
<td>
Rank
</td>
<td colspan="2" style="width: 20px;">
Style
</td>
</tr>
</thead>
<tr>
<td>
Jimmi Hendrix
</td>
<td>
1
</td>
<td>
Blues-Rock
</td>
<td style="width: 20px;">
<div class='top'>
<div class='selector popup-dropdown'>
X</div>
</div>
<div style='clear: both;'>
</div>
<div class='outside'>
<div class='content popup-dropdown'>
<ul class='action'>
<li>Make God Status</li>
<li>Elevate</li>
<li>Respect</li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
Carlos Santana
</td>
<td>
2
</td>
<td>
Blues-Rock
</td>
<td style="width: 20px;">
<div class='top'>
<div class='selector popup-dropdown'>
X</div>
</div>
<div style='clear: both;'>
</div>
<div class='outside'>
<div class='content popup-dropdown'>
<ul class='action'>
<li>Make God Status</li>
<li>Elevate</li>
<li>Respect</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate pulvinar
nisi vel tincidunt. Mauris eget pulvinar enim. Suspendisse vitae turpis id orci
porttitor auctor nec ut nisi. Nunc euismod. </div>
</body>
</html>
Alright. Correct me if I misunderstood, but I think you wanted to just basically get rid of that gap next to the ‘X’ and have the right edge of the popup aligned with the right edge of the ‘X’ box. You can accomplish this with absolute positioning. I’ve made changes to the fiddle here: http://jsfiddle.net/F5bn4/2
I changed the inline style on the
tds and I changed 200px to 20px ondiv.top