Ionic multi-line list not working properly

[nightwnvol]

Resources: Before submitting an issue, please consult our docs.

Stencil version: (run npm list @stencil/core from a terminal/cmd prompt and paste output below):

@stencil/core@0.5.1

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:

When <ion-item> component contains multiple lines, it will not automatically expand it’s height to fit the new lines of text

Expected behavior:

Multi-line list expected result

Steps to reproduce:

import { Component} from '@stencil/core';

@Component({
    tag: 'app-list',
    styleUrl: 'app-list.scss'
})
export class AppList {

    render() {
        return (
            <ion-list>
                <ion-item>
                    <h2>Finn</h2>
                    <h3>I'm a big deal</h3>
                    <p>Listen, I've had a pretty messed up day...</p>
                </ion-item>
            </ion-list>
        );
    }
}

Related code:

insert any relevant code here

Other information:

[nightwnvol]

Temporary workaround:

app-list.scss

app-list {
     .input-wrapper {
          flex-direction: column;
     }
}

[jgw96]

Hey @NightWnvol , this is actually because of a syntax change in Ionic 4. We will have docs on this once ionic 4 stable is out, but here is an example in the meantime (: https://github.com/jgw96/stencil-beer/blob/4787f878e1bffa8682568a689dc4aa1233bcdcef/src/components/bar-list/bar-list.tsx#L22