Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Mario Ruiz
75
EditCell TextArea
posted

Hello team

I am working with rowEditable of IgxGrid, I have columns with long text, in the part of the ng-template igxCellEditor I add a class to be able to see the input as a text box, but the text does not fit the size of the box, as shown in the picture.

<igx-column field="DescripcionLarga" header="Descripción completa" dataType="string" width="450px" [filterCellTemplate]="defaultFilterTemplate" sortable="true" [movable]="true" [resizable]="true">
    <ng-template igxCell let-cell="cell">
      <span>{{ cell.value }}</span>
    </ng-template>
    <ng-template igxCellEditor let-cell="cell">
      <igx-input-group class="igx-input-group__textarea">
        <input igxInput  [igxFocus]="true" name="DescripcionLarga" [(ngModel)]="cell.editValue" [igxTextSelection]="true" type="text" datatype="string"/>
      </igx-input-group>
    </ng-template>
  </igx-column>

How can you make it fit?

Thanks

Parents
No Data
Reply
  • 1500
    Offline posted

    Hello,

    Thank you for posting on our forums.

    Generally inputs and textareas don't change size based on content. Furthermore, there is no css property that does that.

    However, there are a few properties that can help you in this case.

    The first one is setting text ellipsis. From what I can see in our samples, this is enabled by default, so it should already be displaying indicator that there is more text than the displayed one.

    The other property is white-space, controlling how the white space in the element is handled. Changing this should display the text in multiline if there is enough height for that.

    :host {
    ::ng-deep {
    .igx-grid__td-text {
        white-space: normal;
        }
    }
}

    I can also suggest checking various blogs and forums online for autoresizing containers. While there are no css properties for that, there are some ways that this can be achieved, should auto-resize is available in your case.

    Sincerely,
    Tihomir Tonev
    Associate Software Developer
    Infragistics

Children