Solved

Align a <div> to a table row

Posted on 2016-10-14
3
99 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 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

738 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