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:

mvp_badge
MVP

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

Hi João,

For mobile, the goal of this accordion is to show a brief summary of the "applicant" details to the user before the latter approves or disapproves it. It is a business requirement. I don't exactly understand how to utilize the html widget, the inline css, or the style properties as I tried to use them all to no avail. May I ask which is the best to use?

Below is a screenshot of what my widget tree looks like.

Within an adaptive column (2) contains a container, which then contain an expression each (e.g. Referral Code). I would have attempted to place a container lengthwise without the adaptive columns, but there would be no line in the middle that evenly separates the label and the details.

Hi Rafael,

can you please share the oml.

Thanks,

Diksha


HI try to use word wrap, style.

word-wrap: break-word:


Regards,

Rama

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.