Solved

Align a <div> to a table row

Posted on 2016-10-14
3
90 Views
Last Modified: 2016-10-14
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
Comment
Question by:Brian Coughter
  • 2
3 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41843757
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
 

Assisted Solution

by:Brian Coughter
Brian Coughter earned 0 total points
ID: 41843871
Setting the <tr> position:relative did not work.

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

Thank you
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41843933
You're welcome. I wasn't sure if the <tr> would work. Glad you got it figured out.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question