Skip to main content

Bug Tracker

Side navigation

#14487 closed bug (notabug)

Opened October 25, 2013 07:57PM UTC

Closed October 25, 2013 08:46PM UTC

Last modified September 03, 2014 06:51PM UTC

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:
Attachments (0)
Change History (3)

Changed October 25, 2013 08:46PM UTC by rwaldron comment:1

resolution: → notabug
status: newclosed

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

Changed September 03, 2014 06:36PM UTC by gkertai comment:2

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

Changed September 03, 2014 06:51PM UTC by dmethvin comment:3

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().