ion-input: overflow: hidden !important text-overflow: ellipsis ; not working for me

Asked Aug 02 '18 at 09:14

Active Oct 17 '19 at 16:42

Viewed 519 times

I have ion input with this css classes ind it is not working.

I tried all the solutions in this link:

and it still not working This is my code:

html:

<ion-input 
    placeholder="{{data.IncentiveText | translate}}" (input)="updateSearch()" 
    [(ngModel)]="autocomplete.query" 
    [id]="data.FieldName" 
    [type]="text" 
    name="data.FieldName" 
    class="search"></ion-input>

css:

.search{
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 30px;
    white-space:nowrap !important;
    display:block !important;
    float:left;
    position: static;
}

Do you have any solution?

edited Oct 17 '19 at 16:42

Vadim Kotov

8,084
8
48
62

asked Aug 02 '18 at 09:14

l.developer

what you want to do? – Biswajit Aug 02 '18 at 09:47
Do you want text inside search input to have three dot when overflow? – Biswajit Aug 02 '18 at 09:48
@Biswajit :yes. exactly. – l.developer Aug 02 '18 at 11:46
My friend no one do this. I have never seen this. You cant put ... not with css inside input but you may be do using javascript. But i advice it is not wise because user might need to scroll inside input for full text line if it overlap. But if u do so user will find half text. Smile! – Biswajit Aug 02 '18 at 11:51

ion-input: overflow: hidden !important text-overflow: ellipsis ; not working for me

0 Answers0