Bug Tracker

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#14487 closed bug (notabug)

Show and hide functions don't work when there are !important styles

Reported by: lihanli Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 2.0.3
Keywords: Cc:
Blocked by: Blocking:

Change History (3)

comment:1 Changed 5 years ago by Rick Waldron

Resolution: notabug
Status: newclosed

Of course it doesn't, that's how "!important" works http://gyazo.com/ecf82b34f7e3e4a868ede58cb2979e4e

comment:2 Changed 5 years ago by gkertai

We've come across this same issue in our app, where we use the flex-box model extensively. Flex-box requires us to define display: box !important rules to make sure that lower priority display rules don't mess up the layout.

We're also using sortable and draggable from jQueryUI, which in turn uses jQuery.hide() to temporarily hide dragged elements, so we had to patch the jQuery.hide() function to use "display: none !important" for this (see code snippet below).

Do you see any potential problems with adding the fix to the codebase? Do you think it can hurt many users relying on this undocumented side-effect?

	// Set the display of most of the elements in a second loop
	// to avoid the constant reflow
	for ( index = 0; index < length; index++ ) {
		elem = elements[ index ];
		if ( !elem.style ) {
			continue;
		}
		if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
			// fix for hiding "display: xxx !important" elements
			if ( show ) {
				elem.style.removeProperty( "display" );
				if ( values[ index ] ) {
					elem.style.setProperty( "display", values[ index ] );
				}
			} else {
				elem.style.setProperty( "display", "none", "important" );
			}
		}
	}

Cheers, Gabor

comment:3 Changed 5 years ago by dmethvin

The best thing to do is not use .show() or .hide() at all. There are too many special cases to consider in order to get it right, and no amount of code will end up doing the expected thing. Just use a class name and .addClass() or .removeClass().

Note: See TracTickets for help on using tickets.