Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Align a <div> to a table row

Posted on 2016-10-14
3
Medium Priority
?
130 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 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

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

718 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