156
Views
5
Comments
Solved
Only show preview of Expression in a Table
Question

Hi all,


I created an application that contains an overview of existing tasks in a table. The table contains fields like Task Name or Description, which are linked to an underlying database.

What I want: In the field Description should only be the first 2-3 rows of the Description and the height of the row should be the same, no matter if  Description is empty, there are a few words in it or there is a long text.
I already found the style class "fixed" for the Expression field, which stops the row from adapting.  But now it looks like this:

Instead, it should only show a preview, depending on how much fits into the field and end with something like "..."

Is there any solution for this?

Thanks and best regards,

Raphael 


2024-10-16 11-59-48
Nick Vandebriel
Solution

Hello Raphael,

You could do the following: 


What this does is, you will check first if the description is bigger then 20 characters if so it will only show the first 20 characters of the description and will add ... behind it. If not it will just show the description. This way you won't have unnecessary dots behind your descriptions.


Kind regards,


Nick

UserImage.jpg
Raphael Peck

Awesome, that's exactly what I was looking for!

2024-11-20 08-28-20
Pedro Marques

Hi Raphael,

I think you can achieve this with some CSS. Take a look at this https://www.w3schools.com/cssref/css3_pr_text-overflow.asp and let me know if it helps.

UserImage.jpg
Raphael Peck

Hi Pedro,

thanks for the hint. I found the style class "text-ellipsis" which does exactly what they explain in the link.
Now it looks like this:

it somehow "pushed out" all the other values. Do you know how I can solve this?
sorry, But I haven't worked with CSS before.

2024-11-20 08-28-20
Pedro Marques

There's also another option you can consider, which is using the substring function.

This will "cut" your string and only show x characters as described in the image.

2024-10-16 11-59-48
Nick Vandebriel
Solution

Hello Raphael,

You could do the following: 


What this does is, you will check first if the description is bigger then 20 characters if so it will only show the first 20 characters of the description and will add ... behind it. If not it will just show the description. This way you won't have unnecessary dots behind your descriptions.


Kind regards,


Nick

UserImage.jpg
Raphael Peck

Awesome, that's exactly what I was looking for!

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