23
Views
4
Comments
How to format the UI of expression widget that goes past boundary (container)?
Question
Application Type
Mobile

Good day OS Community!

Context: I am trying to fix the UI of my adaptive column by typing in a ready-made style class "text-ellipsis" so that the expression displayed does not get cut in half. It worked perfectly at first, but I soon realized that if the text is larger than the allotted size of the expression or container surrounding it, the other adaptive column suffers.

Can anyone share some advice on this? 

Best,

Rafa


P.S. 

Actual Photo of my app:

Rank: #93

Hi Rafa,


For Mobile, since there is no mouse hover, you want to provide a way for the user to see all the information.

Now it depends on the relevancy of the information:

  • Does the user always needs to see the information? If so, you better not crop but show everything and think on a design that can accommodate this;
  • The user does not need to see the whole information but occasionally wants to? If so, then you can consider patterns like show more, show less (CSS how-to example here) or an icon which when pressed opens a modal with the whole text.


Hope it helps.


Cheers,

João

Rank: #2654

Hi Rafael,

can you please share the oml.

Thanks,

Diksha


HI try to use word wrap, style.

word-wrap: break-word:


Regards,

Rama