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
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 CssThis 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 helpsI 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
height: auto;
width: auto;
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 :)
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