Menu
An html segment with a div containing a form containing a table:
<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
<style type="text/css">
#content{position:relative}
table {border-color:#999;border-style:solid}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button onclick="javascript:$('.content-panel').toggle();">Toggle</button>
<div id="content">
<div class="content-panel">
<form action='' method='post'>
<select>
<option>a </option>
</select>
<table>
<tr><td>ABCDEF</td></tr>
</table>
</form>
</div>
</div>
</body>
</html>
The toggle button should hide the form and its nested table, but does not do so under IE8. (version 8.0.60001) The form content gets hidden, but the table border continues to show, and retains its size. It is related to standards mode; it disappears in quirks-mode.
Does anybody have a workaround for this?
This example page is reduced about as far as I can reduce it. If I remove the select or either of the divs, the problem disappears. The the select must be present, and the table needs to be nested in the form, as it will contain form elements.
The page itself is at: http://dev.rdbhost.com/rdbadmin/mainProbDemo.html
I posted this problem earlier with an overly simplified example, which was not reproducible. Thank you if you looked at it then.
663
http://api.jquery.com/detach/ might work for you if merely hiding doesn't work - it will remove the element from the dom, but save it so that you can reinsert it if you want to (using http://api.jquery.com/append/ or http://api.jquery.com/appendTo/). You might also try setting the visibility css attribute $(".content-panel").css("visibility","hidden"); as an additional measure (note that that will mean that the element still takes up space, see also http://www.w3schools.com/css/pr_class_visibility.asp) (edit: revert with $(".content-panel").css("visibility","visible");).
Last but not least, you never know - maybe just using show(0); and hide(0); works and toggle is borked in some way - not probable, then again I guess murphy applies in this case.
136
Why does your onclick handler have the javascript: schema declaration in it?
<button onclick="$('.content-panel').toggle();">Toggle</button>
Is it ok with you to wrap the whole form elements with additional table? Something like this:
<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
<style type="text/css">
#content{position:relative}
.inner {border-color:#999;border-style:solid}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<button type="button" onclick="javascript:$('.content-panel').toggle();">Toggle</button>
<div id="content">
<div class="content-panel">
<form action='' method='post'>
<table>
<tr>
<td>
<select>
<option>a </option>
</select>
</td>
</tr>
<tr>
<td>
<table class="inner">
<tr><td>ABCDEF</td></tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Or just adding all elements under the form to the table you have:
<form action='' method='post'>
<table>
<tr>
<td>
<select>
<option>a </option>
</select>
</td>
</tr>
<tr>
<td>
ABCDEF
</td>
</tr>
</table>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With