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
Hello Mario,
You will need to add the property to the correct element. Here is an example how to have the text in the cell be displayed in multiline:
https://stackblitz.com/edit/igx-grid-change-cell-style-button?file=src%2Fapp%2Fgrid%2Fgrid-conditional-cell-style%2Fgrid-conditional-cell-style.component.scss
If you have further questions, please let me know.
Sincerely,Tihomir TonevAssociate Software DeveloperInfragistics
Could you help me with your example, I already tried to make the change as suggested, but nothing.
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.