[wp-trac] [WordPress Trac] #34344: Expanded section margin-top glitches when other section is deactivated

[WordPress Trac]

#34344: Expanded section margin-top glitches when other section is deactivated
--------------------------+---------------------------
 Reporter:  westonruter   |       Owner:  ryankienstra
     Type:  defect (bug)  |      Status:  assigned
 Priority:  normal        |   Milestone:  4.5
Component:  Customize     |     Version:  4.2
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  javascript
--------------------------+---------------------------
Changes (by ryankienstra):

 * keywords:  needs-patch => has-patch


Comment:

 '''Possible Solution'''

 Hi @westonruter,
 Could you please see my [https://github.com/xwp/wordpress-develop/pull/147
 pull request] and
 [https://core.trac.wordpress.org/attachment/ticket/34344/800bf8.diff
 identical patch]?

 They [https://github.com/xwp/wordpress-
 develop/compare/trac-34344-2?expand=1#diff-
 6bdd5041777c50e624f1d0beae2e0b7cR463 set] the `height` to `0` for all
 sections in the root panel that aren't open.

 '''Reason'''
 Like we saw in [https://core.trac.wordpress.org/ticket/35947 trac-35947],
 non-open sections still took up space in the DOM. And they caused problems
 with the calculation of the margin-top value.

 For example, [https://core.trac.wordpress.org/ticket/34344#comment:7 this
 ticket] gives code to reproduce the bug:


 {{{
 wp.customize.section('header_image').expand( { completeCallback:
 function() {
          _.delay( function(){
 wp.customize.section('colors').active(false); }, 1000 );
 } } );
 }}}


 This opens the `header_image` section, and de-activates the `colors`
 section. But the `colors` section had a height of `43px`. So when it's de-
 activated, it is given `display: none`. And it's taken out of the DOM.

 But the `margin-top` of the `header_image` content area was already set at
 `-259px`. So when the `colors` section moves out of the DOM, the
 `header_image` section moves too high.


 This is similar to @delawski's [https://github.com/xwp/wordpress-
 develop/commit/89591f9e3c3ae42b6b1c40b350f30c51c90892fa commit] for
 [https://core.trac.wordpress.org/ticket/35947 trac-35947].

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34344#comment:8>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform