• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 159
  • Last Modified:

Align a <div> to a table row

I use ColdFusion as my pre-processor and I have a CF loop that prints out table rows of datasets.  I have a delete button in each row that I want to "popup" a div (to confirm the delete) over that row that will allow me to delete the record.  Currently, when I click on a delete button, the all the divs shows over the first row no matter which row I want to delete.  Therefore, it's a positioning problem.

Loop code:
<cfloop query="resident_appts">
        	<table class="<cfoutput>#iif((resident_appts.currentRow MOD 2 EQ 0), DE('curApptRowEven'), DE('curApptRowOdd'))#</cfoutput>" border="0" cellspacing="0" cellpadding="0" width="100%">
  				<tbody>
    				<tr>
      					<td class="saTime"><cfoutput>#TimeFormat(resident_appts.datetime_start,"short")# - #TimeFormat(resident_appts.datetime_end,"short")#</cfoutput></td>
      					<td align="right">
                        
                        	<!--- Appointment Edit/Delete Buttons --->
                            <table border="0" cellspacing="5" cellpadding="0">
  							  <tbody>
    							<tr>
      							  <td id="appEdit" class="appEditDel">Edit</td>
      							  <td id="appDel<cfoutput>#resident_appts.currentrow#</cfoutput>" class="appEditDel" onClick="<!--- delRec(<cfoutput>#resident_appts.id#</cfoutput>); --->">Delete</td>
    							</tr>
  							  </tbody>
							</table>
                            <!--- END Appointment Edit/Delete Buttons --->
                            
                            	  <script>
									$( "#appDel<cfoutput>#resident_appts.currentrow#</cfoutput>" ).click(function() {
  						   			$( "#confirmAppDelete<cfoutput>#resident_appts.currentrow#</cfoutput>" ).fadeToggle( "slow", function() {
  										});
									});
								  </script>
                            
                            <!--- Confirm Appointment Delete --->
                            <div id="confirmAppDelete<cfoutput>#resident_appts.currentrow#</cfoutput>" class="confirmAppDelete">Are you sure you want to delete this appointment?</div>
                            <!--- Confirm Appointment Delete --->
                            
						</td>
    				</tr>
    				<tr>
                    	<td class="saName"><cfoutput>#resident_appts.name#</cfoutput></td>
                        <td class="saLoc"><cfoutput>#resident_appts.location#</cfoutput></td>
                    </tr>                    
                    <tr>
      					<td colspan="2" class="saDesc"><cfoutput>#resident_appts.description#</cfoutput></td>
   					</tr>
  				</tbody>
			</table>
        </cfloop>

Open in new window


CSS:
.confirmAppDelete {
    font-family: "proxima-nova";
    font-weight: 200;
    font-size: 20px;
    position: absolute;
    color: #008bab;
    background-color: white;
    border: solid 1px #008bab;
    width: 884px;
    height: 120px;
    opacity: .8;
    z-index: 4;
    top: 1px;
    left: 0px;
    text-align: center;
    display: none;
}

Open in new window

0
Brian Coughter
Asked:
Brian Coughter
  • 2
2 Solutions
 
Kim WalkerWeb Programmer/TechnicianCommented:
Absolute position is relative to the closest ancestor element with positioning. Even it is it position: relative; without any offsets, the ancestor becomes the zero point for the next generation of descendor elements with positioning. Try giving your <tr> elements a relative position and see if that works.
tr { position: relative; }

Open in new window

0
 
Brian CoughterOwnerAuthor Commented:
Setting the <tr> position:relative did not work.

Setting the <table> class to position:relative worked.

Thank you
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
You're welcome. I wasn't sure if the <tr> would work. Glad you got it figured out.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now