/    Sign up×
Community /Pin to ProfileBookmark

Hello,

Please look into this code (or the attached file)

When clicking on the button toggles the table to hide and then to show, it leaves an extra width on the table. (See screenshot for details)

Is this a bug in jQuery? Can we overcome this?

[url]http://img442.imageshack.us/my.php?image=originalzh3.gif[/url]

[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script language=”javascript” src=”jquery-1.2.6.js”></script>
<script>
$().ready(function(){
$(“#mybtn”).click(function(){

$(“#myid”).slideToggle();
});

});
</script>
</head>
<body>
<input type=”button” id=”mybtn” value=”Clicky” />
<table width=”50&#37;” border=”0″ cellspacing=”0″ cellpadding=”0″ id=”myid” bgcolor=”#CCCCCC” align=”center”>
<tr>
<td align=”center”><strong>Name</strong></td>
<td align=”center”><strong>City</strong></td>
<td align=”center”><strong>Coutry </strong></td>
<td align=”center”><strong>Telephone</strong></td>
<td align=”center”><strong>Designtion</strong></td>
</tr>
<tr>
<td align=”center”>Paul</td>
<td align=”center”>New York</td>
<td align=”center”>US</td>
<td align=”center”>111222333444</td>
<td align=”center”>CEO</td>
</tr>
<tr>
<td align=”center”>Adam</td>
<td align=”center”>Chicago</td>
<td align=”center”>US</td>
<td align=”center”>11558899</td>
<td align=”center”>Programmer</td>
</tr>
</table>

</body>
</html>
[/CODE]

Thanx

[upl-file uuid=1035fab5-67fc-4749-88e8-32d45fc7d818 size=31kB]jquery-Bug.zip[/upl-file]

to post a comment
JavaScript

8 Comments(s)

Copy linkTweet thisAlerts:
@FangNov 13.2008 — Wrap the table in a div:&lt;div id="myid"&gt;
&lt;table width="50&amp;#37;" border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" align="center"&gt;
.
.
&lt;/table&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@Jeff_MottNov 13.2008 — Fang's answer will solve the problem for you, cancer10, but I thought you'd be interested to understand [i]why[/i].

When jQuery hides an element, it assigns the style [font=courier]display:none[/font], and when it shows it again, it assigns the style [font=courier]display:block[/font]. This causes a problem because tables need a style of [font=courier]display:table[/font]. This doesn't affect IE because IE doesn't recognize [font=courier]display:table[/font].

So if you can't have display:block set on the table itself, then you'll need to use a wrapper DIV and show/hide that element instead, which is what Fang suggested.
Copy linkTweet thisAlerts:
@phantom007authorNov 13.2008 — Thanx for the explanation Jeff.
Copy linkTweet thisAlerts:
@FangNov 13.2008 — So if you can't have display:block set on the table itself, ...[/QUOTE]That wouldn't work. A table has to have a containing block.

Odd that this is not mentioned in the jQuery documentation as it affects all table elements.
Copy linkTweet thisAlerts:
@Jeff_MottNov 13.2008 — That wouldn't work. A table has to have a containing block.[/quote]

That's what I said.

?

Odd that this is not mentioned in the jQuery documentation as it affects all table elements.[/quote]

My best guess is that's because this is such a rare case. Tables are hardly used anymore.
Copy linkTweet thisAlerts:
@FangNov 13.2008 — That's what I said.[/QUOTE]Not quite. You suggest setting the table to [I]display:block[/I], which wouldn't help. Just me being pernickety.
Copy linkTweet thisAlerts:
@Jeff_MottNov 13.2008 — Not quite. You suggest setting the table to display:block[/quote]

No, I said that's what jQuery does and explained how it caused the problem. Nowhere did I suggest that display:block was a solution.
Copy linkTweet thisAlerts:
@phantom007authorNov 20.2008 — Question:

How do you hide/unhide an entire row in a table using jQuery?

Warpping it with a <DIV> didnt help ?

Thanx
×

Success!

Help @phantom007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...