fxShow/fxHide is setting display: block on inline elements

[adamdport]

Bug, feature request, or proposal:

bug

What is the expected behavior?

fxHide shouldn't affect the original display of the element

What is the current behavior?

fxHide is sometimes setting display:block;

What are the steps to reproduce?

https://stackblitz.com/edit/angular-flex-layout-seed-8vay7o

What is the use-case or motivation for changing an existing behavior?

I sometimes want inline elements that hide at certain breakpoints

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "5.2.9",
"@angular/flex-layout": "5.0.0-beta.14",
"@angular/material": "5.2.4",

Is there anything else we should know?

#320 fixed some instances of this behavior, but not all. Perhaps this is related to transclusion?

[CaerusKaru]

Duplicate of #142?

[jotatoledo]

Just noticed this issue, some <span fxHide.lt-md> are now block components, which partially breaks some layouts.

[CaerusKaru]

Oh I see the problem now. The fallback, ideally, should be blank. I'll try to get in a fix for this by beta 17

[FrancisS]

Any progress on this? @CaerusKaru @ThomasBurleson

[FrancisS]

If anyone is looking for a temp solution this is what we had to do

  @media (min-width: 1440px) {
    mat-header-cell,mat-cell{
      &[fxHide\.lt-lg]{
        display: flex !important;
      }
    }
  }

It sets the display to flex when the column is not hidden for a given breakpoint.
You will need separate rules for each breakpoint you use.

[CaerusKaru]

I've looked into this, and unfortunately while I can plainly see this replicated in the StackBlitz, any test cases I create for default inline elements (e.g. <span>) pick up the display: inline; styles correctly. That being said, I'm still looking into this, and my current thinking is that <mat-placeholder> is initially a block element, and then the browser computes its parent and determines it to be inline. I'll update as I continue to investigate this and #848

[adamdport]

@CaerusKaru here's another reproduction using mat-table. The cells are supposed to be display:flex, but fxHide is setting them to display:block. Hope it helps. https://stackblitz.com/edit/angular-vpw5kv-r4td8o

[aklauza]

Found the same issue with a table column that I was trying to hide for small devices (using <td fxHide.xs>). My table is inside a mat-tab, thus, it's initially hidden, but when the tab is activated the fxLayout engine realizes it's not an xs device but a desktop and injects an inline style="display:block". The problem is that tds should be "display:table-cell", not block. My workaround is not use for this case fxHide.xs, but the following:

.hide {
   display: none;
}

and in the html:

<td ngClass.xs="hide">...</td>

[CaerusKaru]

@aklauza Can you pull together a StackBlitz using your example? The only issue with @adamdport's examples are that they're all using Angular-defined elements, so it's tough to know what the defaults are supposed to be.

[CaerusKaru]

I think I've got this patched in #881. Please build to make sure. If I don't hear back either way in the next week, I'll push it to the nightly builds (since it's not that far ahead of NPM, it shouldn't impact too many if it breaks something).

[adamdport]

@CaerusKaru what's the simplest way to test a branch? It looks like the package name is flex-layout-srcs which is throwing me off. Do I need to clone it, change it back and install that or is there a simpler way?

[CaerusKaru]

What I do is clone the branch, build the lib, and then run npm install <src directory> which would be dist/releases/flex-layout IIRC.

Or you can ask @srcn what they did in #848

[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.}