Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: hideMode: 'visibility' doesn't work with hbox layout

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294

    Default hideMode: 'visibility' doesn't work with hbox layout

    Here is fiddle with the problem.
    Setting hideMode to visibility works properly with vbox layout(comment out layout: 'hbox' in provided fiddle) -> the hidden element takes properly the space. Setting layout to hbox breaks this behavior -> the hidden element doesn't take space.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report. This was raised before (EXTJS-11185 and EXTJS-5424) and was determined by our developers to not be a bug. The explanation was that hidden means the component is hidden and won't participate in a layout, regardless of the hideMode, and that to achieve the same effect one can use the following:
    Code:
    component.el.setStyle('visibility', 'hidden');

  3. #3
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294

    Default

    Thanks for the solution, but could you or developers explain why the behavior differs between layout types? For vbox the hidden component participates in layout.

    At least native html behaves identically: https://jsfiddle.net/yorl1n/rd5kgwru/
    I understand, that the layouts in extjs has absolute positioning and positions are calculated manually, but behavior should be the same as in native html, and the elements with hide mode visibility should participate in layout calculations.
    Thanks in advance.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257

    Default

    The behaviour isn't different between layouts types, fields have a bottom margin by default which is why there's extra space with hbox.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294

    Default

    Quote Originally Posted by evant View Post
    The behaviour isn't different between layouts types, fields have a bottom margin by default which is why there's extra space with hbox.
    I mean not a margin, but a space, that take the hidden element with vbox layout(so just comment out layout string in fiddle). Just to be clear here is screenshot:
    layouts.png

  6. #6
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294

    Default

    Here are 2 more screenshots with inspector to show how exactly the hidden element is placed:

    hbox.jpg
    vbox.jpg

    The goal, which I want to achieve is to hide some elements but they should still take their place. In some cases I already use solution provided by Gary, but not in all cases it is comfortable. I should for every case use listeners to make el invisible. In native html the element hidden with visibility property actually take space, if I don't want this behavior I will use display:none. Extjs overrides native behavior and for hbox layout the hidden element with visibility property will not take place, but for vbox layout it works as it should.

  7. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,257

    Default

    Right, but in your post you're saying vbox and hbox behave differently. They don't, they behave in the same way.

    With an auto layout there is no calculation in that sense, items just layout as they sit.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  8. #8
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294

    Default

    It is true, it was my fault assumption regarding vbox layout. It was behavior of auto layout vs vbox/hbox. But in any case, why you decided to avoid standard behavior and bypass calculation of elements with visibility hidden?

  9. #9
    Sencha Premium User
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    122

    Default

    Quote Originally Posted by yorl1n View Post
    But in any case, why you decided to avoid standard behavior and bypass calculation of elements with visibility hidden?
    +1

  10. #10
    Sencha Premium User
    Join Date
    Nov 2013
    Location
    Piacenza, Italy
    Posts
    220

    Default

    As already said in another thread, the documentation of Ext.Component.hideMode for 'visibility' mode tells "The Component will be hidden using the visibility: hidden style.".
    So, if this not a bug, is documentation wrong?

    See:
    http://docs.sencha.com/extjs/6.2.1/c...l#cfg-hideMode
    https://www.sencha.com/forum/showthr...-work-for-hbox

Page 1 of 2 12 LastLast

Similar Threads

  1. [DUP] BUG: hideMode=visibility does not work for hbox
    By JacobGu in forum Ext:Bugs
    Replies: 6
    Last Post: 13 Dec 2017, 8:08 AM
  2. Replies: 2
    Last Post: 15 May 2015, 6:10 AM
  3. [CLOSED] Timefield hideMode visibility
    By alexander.urban in forum Ext:Bugs
    Replies: 2
    Last Post: 29 Apr 2014, 4:27 AM
  4. Replies: 2
    Last Post: 10 Jun 2011, 6:42 AM
  5. Replies: 6
    Last Post: 21 Aug 2009, 7:10 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •