[wp-trac] [WordPress Trac] #27348: Widget Customizer: Bigger, Longer Widgets not Scrollable

[WordPress Trac]

#27348: Widget Customizer: Bigger, Longer Widgets not Scrollable
------------------------------+-------------------------
 Reporter:  daveshine         |       Owner:  ocean90
     Type:  defect (bug)      |      Status:  reviewing
 Priority:  high              |   Milestone:  3.9
Component:  Widgets           |     Version:  trunk
 Severity:  normal            |  Resolution:
 Keywords:  has-patch commit  |     Focuses:  javascript
------------------------------+-------------------------

Comment (by adamsilverstein):

 Replying to [comment:12 ocean90]:
 > Good catch adamsilverstein. [attachment:27348.5.patch] is 27348.patch
 plus
 >
 > * The widget width should be a max-width, not min-width
 > * Removes `.customize-control-widget_form.wide-widget-control.collapsing
 .widget-inside` and `z-index: -2;`
 >
 > Tested in IE, Firefox and Chrome.
 >
 > adamsilverstein: The lag is through the text which wraps first, see this
 post on [http://stackoverflow.com/questions/8165467/jquery-animation-
 slideleft-without-text-wrapping stackoverflow]. My test widget is from
 westonruter: https://gist.github.com/westonruter/7141599
 >
 > 27348.5.patch should be ready for a commit, but if someone has an idea
 to prevent the text wrapping we can include it first.

 I looked at the text wrapping issue a bit further. part of the issue is
 the height of the container is left to float, it is only assigned a max-
 height to ensure it fits in the window. The only way to set the height
 properly would be to hide it, set to the full width, inspect the hight and
 set as the max height or actual height, collapse the width and then start
 the animation again. Convoluted as this is, its still won't get the text
 to remain fixed as the container expands, even with all surrounding
 elements set to 'overflow:hidden' I still see the text readjusting during
 animation (see http://cl.ly/2i1Y0l2V1G1s).

 Personally I'm not too bothered by the shifting text, if we really want to
 resolve this issue completely we should switch from animating size to
 animating position or fading.  Animating position would mean adjusting
 'left' to slide the widget in/out.  Since @westonruter mentioned this was
 the original approach, I'm guessing it brings its own set of
 disadvantages/issues. Fading the widget in and out is another possibility
 - here is a mock up of what this would look like -
 http://cl.ly/2G1K1w39300w. If we want to go the fade in/out route I will
 clean up my test code and provide a patch, otherwise i think this can go
 in as is.

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