No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Framework
    1
    2
    1570
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      KorbenDallas last edited by

      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

      1 Reply Last reply Reply Quote 0
      • K
        KorbenDallas last edited by KorbenDallas

        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;
        }

        1 Reply Last reply Reply Quote 0
        • First post
          Last post