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.
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.
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/
Mariano Picco wrote:
Thanks - but where do I change these CSS values on my Card Item?
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.
Train44ir.org (Charles) wrote:
Hi Charles,
Remove the dot in the style classes property: instead of ".wraptext" just write "wraptext".
You only need the dot in the CSS to identify it as a class name.
You might also need to add to your css:
word-break: break-word; (check this post: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/)
Cheers,
Bruno
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!