Truncate text based on device size?

Wappler General Need Help
1

I have to build a portal that contains many tables of data. I found I can do it successfully if I use the truncate text option. But how can I set the truncate value based on device size?

For example set to 32 characters on phones and 48 characters on tablets, etc …

Possible?

2

You can check the viewport width using the browser component and change the truncate value based on it. Example:

{{my_value.trunc(5, false, '...')}}

becomes

{{my_value.trunc(browser1.viewport.width < 500 ? 5 : 10, false, '...')}}

will set the truncate characters to 5, when the viewport width is smaller than 500px, otherwise they will be set to 10.

4 Likes
3

Brad consider using CSS media queries and define your device size styles there (font sizes, letter spacing, etc). Won’t truncate for you how you request above but will re-scale the font size so you possibly would have no need for truncation.

4

I like the idea of this @Teodor but how do you escape the < and avoid the error there? Also how could we build this in the formatter, is it possible to extend upon this with further browser input?

5

There’s nothing to escape there Dave :slight_smile:

6

I did try to tell Wappler that but it told me this:

2021-04-17_11-32-36
2021-04-17_11-32-36880×249 14.4 KB

:slight_smile:

Works without the escape but still creates the above error…?

esc
esc1758×778 679 KB

7

No need to escape this. That’s something Monaco editor thinks should be escaped, but that’s not the case.
Maybe you can try using &lt; but it’s not required.

1 Like
8

Wish I had studied JavaScript instead of VAX/VMS architecture and assembly (archaic eh) lol…

Thanks Teodor. Kurt also thanks you. After escaping New York he was a little tired.

:slight_smile:

2 Likes
9

An idea for you Brad, a combination of Teodors approach and my suggestion, and you can do it with the standard pickers in Wappler too, no need to go outside Wappler generated code (hacks are great and get the job done though), so just came up with this (using the class toggle).

 dmx-class:360mobile="(Browser.viewport.width <= 360)"

So we have the style .360mobile with its defined font size etc, specifically for sub 360 sized display. Do the same for the other aspects as classes and Robert is your fathers brother (I actually do have an uncle Bob)…

:slight_smile:

Simple!

10

Thanks @Teodor. That makes sense. I will give it a try!

Thanks again for the great support.

11

While this technically works it isn’t a practical solution as there is so many screen resolutions. So doing it by pixels doesn’t really work. :frowning:

12

Use class switching like I mentioned above Brad. That or media queries within your style sheet. There are very few solutions outside of those.

1 Like