Handling very long text being display in table
Question
Application Type
Reactive

Hi i have a problem here , under the observation column, because the user enter very long text the rest of the column content get push down

Is there a top align thing in outsystem or can truncate to show a bit of the whole chunk of text until user mouse over ?

Thank you

Solution

Hello @Jerah 

We have a UI pattern, available that you can use 

You have to take dependencies from OutSystems UI


You can use it in a Expression And for mouse hover you can use Tooltip


I hope this helps


Thanks

Thank you for your reply this sound awesome

But i have one issue , how do you control the width of the tooltips ? As the text is very long the tooltips get stretch vertically down. So if i can increase the width perhaps that will help but the tooltips itself does not allow you to define the width and height.

Hi @Jerah 

You can control the behaviour of your tool-tp by applying some Css

This Css works for me 

.osui-tooltip .osui-tooltip__balloon-wrapper__balloon {

    overflow-wrap: break-word;   

 height: 100px; 

   width: 500px;    

text-overflow: ellipsis;

}


You can change it according to your requirement( Make sure while using tooltip it will show two placeholders, content will have ellipse function, and tooltip will contain whole expression your original expression.

Check if this thread can also helps
I think this will help you, we already have threads related to width of tooltip


https://www.outsystems.com/forums/discussion/69462/how-to-set-the-tooltip-content-width/

https://www.outsystems.com/forums/discussion/70916/tooltip-content-width/

HI  @Jerah

  as Tousif Khan  say , you can also set height width  auto for more  tooltip specification 

.osui-tooltip .osui-tooltip__balloon-wrapper__balloon {

    overflow-wrap: break-word;   

  height: auto; 

   width: auto;    

text-overflow: ellipsis;

}

Hi Jerah,

when something doesn't look like you would prefer, you might be able to solve that with CSS, these are the steps to take, applied to your current tooltip example :

use your developer tools to find what exact css rule is determining the property you are interested in

1) you can use the inspect context menu option to find or get near the element in the dom 

you might have to find the actual element you are interested in by looking near the one you are inspecting (green arrow)

2) click on the element in the dom : you will see all css rules that determine how that element looks

3) have a look on the computed tab to see how width is determined, we see width is 150px, which is same as min-width, so we could assume that min-width is what makes the resulting width

we also see the css selector and the css file that is causing this property to be 150px

4) now have a look on the styles tab and find that css selector

to verify that this property is what determines the width, you can alter the value and immediately see the result in your browser

5) If you are satisfied, you can copy the exact selector and make your own css rule for that css in your screen or block

6) now you can verify the effect of your change, the OutsystemsUI rule has been overruled by your screen-level rule


Good luck with it,

Dorine

Thank you for taking time to reply with such as detail explanation

Hi @Jerah ,

You can show mini length of string that fits for your Column and after that you can show "...".

And On mouse over of that Text you can Implement tooltip that will show the full length text.

I hope this will help....

Hello Jera. You can do a combo of things. For the expression you can do something like :
If(Lenght(<yourvariable>) >
 <MaxNumberCharacterYouWant>,
substr(<yourvariable>,<MaxNumberCharacterYouWant>-3)+"...",<yourvariable>)

This meaning you are checking the lenght of the expression, and if it's higher then a determined value you want you are doing a subtring and adding "..." in front.

Then you can use the widget Tooltip from OutSystems UI. This will allow you to hover it and show some content.


Hope it helps

Thank you for your input i will go try out :)

Hi Jerah,

You can use SubString action to show the maximum number of characters like (0 to 100) and if the lenght is more then you can add see more link and then on mouse over you can show full text either in tooltip or on popup.

Regards,

Shoeb

Solution

Hello @Jerah 

We have a UI pattern, available that you can use 

You have to take dependencies from OutSystems UI


You can use it in a Expression And for mouse hover you can use Tooltip


I hope this helps


Thanks

Thank you for your reply this sound awesome

But i have one issue , how do you control the width of the tooltips ? As the text is very long the tooltips get stretch vertically down. So if i can increase the width perhaps that will help but the tooltips itself does not allow you to define the width and height.

Hi @Jerah 

You can control the behaviour of your tool-tp by applying some Css

This Css works for me 

.osui-tooltip .osui-tooltip__balloon-wrapper__balloon {

    overflow-wrap: break-word;   

 height: 100px; 

   width: 500px;    

text-overflow: ellipsis;

}


You can change it according to your requirement( Make sure while using tooltip it will show two placeholders, content will have ellipse function, and tooltip will contain whole expression your original expression.

Check if this thread can also helps
I think this will help you, we already have threads related to width of tooltip


https://www.outsystems.com/forums/discussion/69462/how-to-set-the-tooltip-content-width/

https://www.outsystems.com/forums/discussion/70916/tooltip-content-width/

HI  @Jerah

  as Tousif Khan  say , you can also set height width  auto for more  tooltip specification 

.osui-tooltip .osui-tooltip__balloon-wrapper__balloon {

    overflow-wrap: break-word;   

  height: auto; 

   width: auto;    

text-overflow: ellipsis;

}

Hi Jerah,

when something doesn't look like you would prefer, you might be able to solve that with CSS, these are the steps to take, applied to your current tooltip example :

use your developer tools to find what exact css rule is determining the property you are interested in

1) you can use the inspect context menu option to find or get near the element in the dom 

you might have to find the actual element you are interested in by looking near the one you are inspecting (green arrow)

2) click on the element in the dom : you will see all css rules that determine how that element looks

3) have a look on the computed tab to see how width is determined, we see width is 150px, which is same as min-width, so we could assume that min-width is what makes the resulting width

we also see the css selector and the css file that is causing this property to be 150px

4) now have a look on the styles tab and find that css selector

to verify that this property is what determines the width, you can alter the value and immediately see the result in your browser

5) If you are satisfied, you can copy the exact selector and make your own css rule for that css in your screen or block

6) now you can verify the effect of your change, the OutsystemsUI rule has been overruled by your screen-level rule


Good luck with it,

Dorine

Thank you for taking time to reply with such as detail explanation

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