[FEAT] Automatic height panes based on pane content

[sjregan]

What are you trying to add to Cupertino-Pane? An option to allow the height of panes to be based on the content within the pane.

Describe your feature request detailed

Add an additional option to the settings (eg: contentBasedHeight: boolean). When set:

1. Hide and disable dragging
2. Set pane height based on the content within the pane

A maximum height setting would probably be required as well with the ability for content within the pane to scroll.

Is there an alternative at the latest version?

[ ] Yes (descripe the alternative) [X] No

Is this related to an issue?

[ ] Yes (Give a link to the issue) [X ] No

[roman-rr]

@sjregan Height of pane based on breakpoints. If you need to increase height, set specific breakpoints. Do you want to be able present pane without specified breakpoints, based on height ? But then, we only will have top breakpoint. How we will know middle position ?

[sjregan]

@roman-rr I want to display content in the pane without setting any breakpoints or specifying a height. I would like the height of the pane to be determined by the content within the pane.

In my use case I am disabling the dragging and forcing a set height that cannot be changed by the user.

To achieve this I have to specify the height of the HTML elements in JavaScript, then I have to calculate the height based on the number of items in the list. Then once I've calculated the height I use it in the settings for the drawer pane.

If the contents of the pane is not a simple list, this becomes more complicated.

I would like an option that meant I didn't have to set breakpoints or height of the pane, the pane would automatically be tall enough to show all the content (up to a limit) within the pane.

[roman-rr]

@sjregan thank you for details, i will work around.

[roman-rr]

@sjregan Should fit your needs:

let pane = new CupertinoPane('.pane', { fitHeight: true });

Will included in next release and available now at master. If any issues, let me know.

[sjregan]

@roman-rr Amazing, thank you so much!

[sjregan]

I've had a play around with this today, a couple of issues I have found.

1. The height of the pane is incorrectly calculated on first open. The second time it is opened it is correct.

https://user-images.githubusercontent.com/1580170/104990924-bd613200-5a71-11eb-8b67-1e0305c0b32a.mov

In the above example the CSS height set on DIV.pane on first open was 117px, on second open it was 140px.

Adding a setTimeout() to ensure everything has loaded and settled did not make a difference. My current workaround is:

const settings: CupertinoSettings = {
    backdrop: true,
    dragBy: [],
    parentElement: 'ion-app',
    showDraggable: false,
    fitHeight: true,
    onBackdropTap: () => {
        this.drawerPane.destroy({animate: true})
    },
    onDidDismiss: () => {
        this.filterOpen = false
    }
}

this.drawerPane = new CupertinoPane('#news-list-filter', settings)

if (!this.filterInitialised) {
    this.drawerPane.present({animate: false}).then(() => {
        this.drawerPane.destroy({animate: false})
    })

    this.filterInitialised = true
}

I present the drawer pane and then immediately destroy it. Then when the user opens it by clicking a button, the correct height is calcualted.

2. If the height of the content within the pane is greater than the height of the window, the drawer pane cannot be scrolled to see the hidden content.

[sjregan]

@roman-rr In case it helps, the issue persists in v1.2.2.

[sjregan]

@roman-rr I have figured out the issue. My SCSS was similar to:

.cupertino-pane-wrapper.page-drawer {
    .pane {
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }

    .page-drawer {
        padding: 16px;
    }
}

This meant that the CSS was not applied until after the pane was initialised. By changing the SCSS to not use .cupertino-pane-wrapper fixed the height calculation issue.

The following is still a problem, should I create a new issue for it?

If the height of the content within the pane is greater than the height of the window, the drawer pane cannot be scrolled to see the hidden content.

[roman-rr]

@sjregan

I have figured out the issue. My SCSS was similar to

In latest release this part should be completely fixed. Height should calculated include .pane paddings and offsets.

[lorenzodianni]

Hi @roman-rr , does the fitHeight: true feature work with breakpoints? I am trying to initialize the CupertinoPane with this configuration:

new CupertinoPane(HTMLElement, {
  draggableOver: true,
  backdrop: false,
  showDraggable: true,
  bottomClose: true,
  fastSwipeClose: true,
  buttonDestroy: false,
  fastSwipeSensivity: 0,
  fitHeight: true,
  breacks: {
    top: { enabled: true, bounce: false },
    middle: { enabled: true, bounce: false },
    bottom: { enabled: false },
  },
});

but I have 2 problems:

• the pane does not change its size based on the content, not even when calling calcFitHeight()
• with bottom: { enabled: false }, the bottomClose option does not seem to work

Is this a feature not implemented with breakpoints, or am I configuring something wrong? Thanks!