shadowayex Posted April 6, 2011 Share Posted April 6, 2011 I'm using jQuery slideToggle on some divisions with automatic height. When slideToggle opens up a div, it slides open a little past the where it should, then jumps back to the desired height. If I provide an explicit height, this does not happen, but the content of the divs changes dynamically, so I would prefer to use an automatic height.Has anyone ever experienced/fixed this problem in their code? Link to comment Share on other sites More sharing options...
thescientist Posted April 6, 2011 Share Posted April 6, 2011 can you post your code so we have something to work with? Link to comment Share on other sites More sharing options...
shadowayex Posted April 6, 2011 Author Share Posted April 6, 2011 I'll see what I can do. I might miss something while attempting to post only the relevant pieces:HTML Output of one division (generated by PHP): <div id="entries"> <div id="entry29"> <span class="toggle">+</span> <span>John Smith</span> <div class="entry-info"> <table> <tbody> <tr> <th>First Name:</th> <td>John</td> <th>Middle Name:</th> <td></td> <th>Last Name:</th> <td>Smith</td> <td><a href="#">Edit</a></td> </tr> <tr> <th>Groups:</th> <td></td> <th>Email Addresses:</th> <td></td> <th>Phone Numbers:</th> <td></td> <td><a onclick="deleteEntry($(this).parents('div[class!=\'entry-info\']').attr('id').substring(5));" href="#">Delete</a></td> </tr> </tbody> </table> </div> </div></div> Related jQuery: div#entries div:nth-child(odd){ background-color: #f8f5ec;}div.entry-info{ display: none;}div.entry-info table{ margin-left: 15px; width: 100%;}div.entry-info td input[type='text']{ width: 90%;}div.entry-info td, div.entry-info th{ text-align: left; width: 15%; vertical-align: top;}span.toggle{ cursor: pointer; display: inline-block; text-align: center; width: 15px;} In regards to my CSS: I wrote it a while back, but everything should still pertain to the HTML posted.I think that's everything. If you see something that refers to something not shown, let me know and I'll go find it.Edit: There is code pertaining the the edit link, but it merely swaps the current content with a form filled with said content to be editted. Link to comment Share on other sites More sharing options...
shadowayex Posted April 7, 2011 Author Share Posted April 7, 2011 I have edited the above post for you to better be able to see the issue (I had forgotten a wrapping div and changed the CSS a tad). In fact, here's a full, valid page that you can copy and paste to an HTML file and view it on your computer. It uses the jQuery hosted at Google API. <!DOCTYPE html><html> <head> <title>jQuery Problem</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("span.toggle").click(function(event) { $(this).parent().children("div:nth-child(3)").slideToggle(300); $(this).text(($(this).text() == "+" ? "-" : "+")); } ); }); </script> <style type="text/css"> div#entries div:nth-child(odd) { background-color: #f8f5ec; } div.entry-info { display: none; } div.entry-info table { margin-left: 15px; width: 100%; } div.entry-info td input[type=\'text\'] { width: 90%; } div.entry-info td, div.entry-info th { text-align: left; width: 15%; vertical-align: top; } span.toggle { cursor: pointer; display: inline-block; text-align: center; width: 15px; } </style> </head> <body> <div id="entries"> <div id="entry29"> <span class="toggle">+</span> <span>John Smith</span> <div class="entry-info"> <table> <tbody> <tr> <th>First Name:</th> <td>John</td> <th>Middle Name:</th> <td></td> <th>Last Name:</th> <td>Smith</td> <td><a href="#">Edit</a></td> </tr> <tr> <th>Groups:</th> <td></td> <th>Email Addresses:</th> <td></td> <th>Phone Numbers:</th> <td></td> <td><a onclick="deleteEntry($(this).parents('div[class!=\'entry-info\']').attr('id').substring(5));" href="#">Delete</a></td> </tr> </tbody> </table> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
shadowayex Posted April 11, 2011 Author Share Posted April 11, 2011 Not to be a bother, but I've still not found a solution. Has anyone run into an issue like this before, or can anyone find a mistake that would cause this issue? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 12, 2011 Share Posted April 12, 2011 It maybe to do with the fact that the total width of th and td = 105% + 15px left margin.one fix that seems to work, is to give div.entry-info a 100% width.div.entry-info{display: none;width:100%;}Edit: Note the left margin on the table produces a horizontal scrollbar at bottom. Link to comment Share on other sites More sharing options...
shadowayex Posted April 12, 2011 Author Share Posted April 12, 2011 Ah, I see. Adding the width fixed the issue. I suppose I should be more careful about tightly packing things together.Thank you for your help. That was driving me crazy.Edit: I ended up setting 100% width on div#entries div to overcome other slideToggle issues within my application, in case anyone else runs into this issue. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.