fxLayoutGap should consider hidden elements

[myrddraall]

When an item in a layout is hidden (usually conditionally) then fxLayoutGap should not apply a gap to the first displayed element

<style>
   .col1{
    display:none !important;
  }
</style>
<div class="container" fxLayout="row" fxLayoutGap="16px">
  <div fxFlex class="col1">Div 1</div>
  <div fxFlex class="col2">Div 2</div>
  <div fxFlex class="col3">Div 3</div>
</div>

In this example Div 2 should not have a gap in front of it.

[therafi]

Part of this issue is still present with this in 2.0.0-beta.9
If there is a conditional fxHide on Div 3 (from the example), when Div 3 is hidden, then Div 2's margin-right (correponding to fxLayoutGap) should collapse.

For example, with the following code, if the page loads as small, then we expand, there will be no gap between 2 and 3. If the page loads as big, then we shrink it, there will be an excess gap after 2.

<div class="containerX">
  <div fxLayout="row" class="colored box nopad" fxLayoutGap="75px">
    <div fxFlex>            [flex 1]              </div>
    <div fxFlex>            [flex 2]              </div>
    <div fxFlex fxHide.lt-md>            [flex 3]              </div>    
  </div>          
</div>

Plunker

Tested on Chrome 61.0.3163

[darkbasic]

if the page loads as small, then we expand, there will be no gap between 2 and 3. If the page loads as big, then we shrink it, there will be an excess gap after 2.

I confirm, please reopen.

[CaerusKaru]

@darkbasic This is being considered as part of #606 and will not be reopened separately

[darkbasic]

No need to reopen if it's tracked somewhere else. Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}