Setting height of ion-item / quill editor

Ionic Framework
1

Hi,

I have a page within my app that basically holds a quill editor (ngx-quill) component my html is as follows:

<ion-header>
  <ion-toolbar>
    <ion-title>{{ "Label.Finding" | translate }} </ion-title>
    <ion-buttons slot="primary">
        <ion-button color="secondary" (click)="dismiss()">
            <ion-icon slot="icon-only" name="close"></ion-icon>
        </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
    <quill-editor
        [(ngModel)]="finding"
        placeholder="{{ 'Fieldname.Finding' | translate }}"
    >
    </quill-editor>
</ion-content>
<ion-footer>
    <ion-toolbar>
        <ion-buttons slot="end">
            <ion-button (click)="save()" translate>Generic.Submit</ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>

My problem is that I can’t find a way to control the height of the input component, ideally I would like the input box to fill the available space top to bottom, however worst case scenario I would just like to increase the height to give the user more available room to complete the input??

2

Is that all the relevant HTML? I don’t understand why there is an <ion-item> or the enclosing <ion-list> at all, so I’m wondering if there’s more you’ve left out here.

3

I have actually just come to the same conclusion, I copy and pasted the template from another page so just followed what had been done before. I have now removed those two tags and I have exactly the same problem?

4

Well, if I do this:

<ion-content>
  <div class="fullheight">hello world</div>
</ion-content>

.fullheight {
  height: 100%;
  border: 2px dashed red;
}

…I see the dashed red border filling up what I would describe as “the available space top to bottom” - is that sufficient for your needs?

5

You’re right that does indeed fill the available space, it appears my issue is with this Quill Editor component, which according to the documentation should fill the available height of its container :confused:

6

Ok I found some css in my global.scss file which was affecting the height, it does indeed now fill it’s container.

Thank you for responding, appreciate the help :slight_smile: