56
Views
7
Comments
Solved
Wrapping text with a card
Question

Using OS11, I am building a Mobile App that has carditems to contain Courses like this:


I have not had this issue on other list item screens, but if the URL is too long it just goes outside the light-blue box in the diagram above during runtime. Like this:

So the problem is it is overwriting my Plus sign Action. It is happening on both the Header and the Content.

I would assume it should wrap automatically? 

I'm not a CSS boffin, so I tried using containers and set the width, etc. but that did not make a difference. I also see there is a white-space CSS element that is set to pre-wrap, but should be set of normal. How do I go about setting just this items CSS? Or is there a better way to solve the challenge? 

Thanks - still a newbie.

Rank: #378
Solution

You probably already have a container (div) which wraps all of your content. All you need to do is give it a class, and in your css files say that the contents of that class should have X and Y properties. 

Rank: #378

Hello,


Yes, white-space should be normal, take a look at your overflow values.

Read more here:

https://css-tricks.com/almanac/properties/w/whitespace/

https://css-tricks.com/almanac/properties/o/overflow-wrap/


Rank: #378
Solution

You probably already have a container (div) which wraps all of your content. All you need to do is give it a class, and in your css files say that the contents of that class should have X and Y properties. 

Hi,

Thanks for your input. I tried this as below and it still does not work:


What am I doing wrong? Sorry I haven't done this CSS stuff before in OutSystems.

mvp_badge
MVP
Rank: #96

Hi Charles,

Adding to the previous expert comments, I'm attaching some visual shots for the content widget tree, which will look like as mentioned below.


Check this: Demo App Screen

Hope this helps you!


Regards,

Benjith Sam

Awesome - thanks all. It's working 100% now! :-)

I wish I could issue you all a "Mark as Solution" as all were helpful, but since I can't I'll give it to Mariano since he got me the furtherest. Funny how just a simple dot can throw a spanner in the works. Happened to me two days ago when I was setting up a DNS record. The dots are out to get me!