Bug Tracker

Modify

Ticket #2016 (closed bug: duplicate)

Opened 5 years ago

Last modified 14 months ago

show() always uses display: block by default

Reported by: vdboord Owned by:
Priority: major Milestone: 1.2.2
Component: core Version: 1.2.1
Keywords: Cc:
Blocking: Blocked by:

Description

The jQuery .show() method always falls back to "display: block" by default. This breaks certain elements in standard compliant browsers: table elements will not display correctly in Firefox if these get "display: block", and span/a elements somehow failed to display in Konqueror 3.5.8 when they are hidden from a global CSS file before (using "display: none").

The following code is an example how this can be fixed. In Internet Explorer, assigning an unsupported value to .display will cause an error, hence the fallback to display: block below. This has been tested to work, it only needs to be incorporated into jQuery.

try {
	// Try standard compliant value first.
	// This list is incomplete but contains the mostly used elements.
	switch( element.tagName ) {
		// Special cases
		case 'TBODY': element.style.display = 'table-row-group'; break;
		case 'THEAD': element.style.display = 'table-header-group'; break;
		case 'TFOOT': element.style.display = 'table-footer-group'; break;
		case 'COL':   element.style.display = 'table-column-group'; break;
		case 'TH':    element.style.display = 'table-cell'; break;
		case 'TD':    element.style.display = 'table-cell'; break;
		case 'TR':    element.style.display = 'table-row'; break;
		case 'LI':    element.style.display = 'list-item'; break;
 
		// Inline elements
		case 'SPAN':
		case 'A':
		case 'IMG':
			element.style.display = 'inline';
			break;
 
		// Block elements
		default:
			element.style.display = 'block';
	}
}
catch(e) {
	// Fallback for Internet Explorer when display value is unsupported.
	element.style.display = 'block';
}

This fix makes workarrounds like $(el).show().css("display", "inline") obsolete.

Thanks.

Change History

comment:1 Changed 5 years ago by joern

The issue with workarounds like that: You can't be sure that an element that has display:inline by default really is supposed to have inline again. You'd need to check if it isn't set to block using CSS.

Just ignoring that issue could make the situation worth, because it will be even more difficult to spot errors. So far you can at least resume that you have to manually set inline when necessary

comment:2 Changed 5 years ago by brandon

  • Status changed from new to closed
  • Resolution set to duplicate

Duplicate of #960 which has a patch.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.