Need help with CSS in a Listview nowrap

0
Hi all,   Ina listview I have a textbox and it looks like this: The text expanse the line height of the list view and i do not want that to happen.  I want the end result to like this: I applied CSS but it is not working. .lv-openrepair is the class for the listview .lv-openrepairs-text is the class for the text .lv-openrepair {     .lv-openrepairs-text {         white-space: nowrap;         overflow: hidden;         text-overflow: ellipsis;     } } Thank you for your help. 
asked
4 answers
0

You can wrap your text in a container and add a custom class on it

.lv-openrepair {
  .lv-openrepairs-container {
    overflow: hidden;
    text-overflow: ellipsis;

    .lv-openrepairs-text {
      white-space: nowrap;
    }
  }
}

 

answered
0

I would suggest adding a max-height and max-width so that the overflow can activate.

answered
0

Hi Stephan,

You will need to target on text, for example if you are using text input widget than you will need to target on label as shown in the screen shot below. 

If you are using input text widget then your SASS code should look like this;

.lv-openrepair {
    .lv-openrepairs-text {
       > label {
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
       }
    }
}

Hope this helps!

answered
0

HI Mohammed,

Than you for your answer, unfortunately it did not work for me. 

Here are some screenshots. 

.lv-openrepair {
    .lv-openrepairs-text {
        > label{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

answered