Solved

Align a <div> to a table row

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

615 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