Content.resize() not working on inactive views


#1

I’m adding/removing a toolbar to multiple screens/views dynamically, calling content.resize() on Content-component for each view, but only the active view’s ion-content is being resized.

Does anyone have an idea how to also resize ion-content of views not currently active?


#2

Why would you call a resize event on content not in the viewport? You could also trigger it immediately on opening the specific view through a lifecycle event.


#3

Because the content-area also needs to be resized on inactive views.

  1. List view: User clicks an item in list and goes to a Detail view
  2. Detail view: User performs an action that toggles the toolbar on for Detail view + List view, then clicks “Back”-button and goes to List view.

List view now also has a toolbar, hence it needs to have content resized.

Does it make sense to you what I’m doing?


#4

I’m passing a reference to content to my toolbar component:

<ion-content #content>
...
</ion-content>
<ion-footer>
    <toolbar-player [content]="content"></toolbar-player>
</ion-footer>

This way I can have the ToolbarPlayerComponent handle the content.resize() when necessary, instead of littering my pages with resize logic. That’s why I want to avoid using Ionic lifecycle events, since it happens in the pages and would be duplicated and wired up to ToolbarPlayerComponents’s hide/show outputs - that would be messy :-/


#5

Yes, it does. But I think it’s understandable that triggering content resizes on inactive content isn’t usual. Let me think about something, because I don’t get any further then setting a variable in a shared service which get’s checked or unchecked by entering or leaving a page. It would be nice to just handle the logic inside your custom component (as you’re trying).


#6

Technically I can see why it doesn’t work (You can’t measure invisible content).

At the same time, I feel I have a very valid use case, and there should be a way to achieve it other than calling content.resize() on ionDidEnter lifecycle events on all pages containing ToolbarPlayerComponent. I imagine it’s a pretty expensive operation that you really don’t want to perform on each ionDidEnter event, but only when it is necessary.


#7

I agree. You shouldn’t trigger the content.resize() on every ionDidEnter, what you could do is check for changes somewhere (shared service or something) and depending on those changes you could trigger the resize. That way you would be certain of the face that you do need to resize the content.


#8

Do Ionic lifecycle event handlers support inheritance? If so, then you could put the logic in a parent component and extends your components from it. Or put the logic in a service.