Long text does not overflow properly in dropdowns and inputs with Edge



  • So yeah the layout breaks pretty easily in Edge. I have a partial fix but is there something in the books for this?
    Edge
    0_1547574890647_43891fc2-63e0-43a6-963b-a032c393ddac-image.png
    Chrome
    0_1547574914795_fb5826d5-60d6-4ba2-8c64-a54a8eeaf715-image.png

    Edge
    0_1547575054373_2c91f5d3-3286-43ae-aa58-1664807a5730-image.png

    Chrome
    0_1547575100442_ae169c98-76dc-42ae-b684-07ea312914c9-image.png

    A partial fix that seems to work.
    .q-datetime-input div.q-if-inner.col.column {width:calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

    .q-input div.q-if-inner.col.column {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%
    }
    result
    0_1547575695813_ff1b3596-757a-4b4c-a1b4-114312e544e6-image.png



  • actually scratch that…now we dont see the labels when there is text in the inputs

    This works though but no ellipsis
    .q-select,
    .q-datetime-input {
    overflow: hidden;
    }
    .q-input{
    overflow: hidden;
    }


Log in to reply