[OutSystems UI Web] How to set the Tooltip content width?
Forge component by OutSystems R&D
Application Type
Traditional Web
Service Studio Version
11.10.13 (Build 39571)

Hi All,

May I know how to set the content of the Balloon wider so that my date time can fit in one line.

I've tried to apply custom css style, the width is wider but the content in still not fill to the width.

Does anyone know how to achieve that?

Thank you.

Hi, 

The maximum width value is set in the Outsystems UI theme:

I think the solution to your problem is the following:

I hope I have helped you.

Thanks!

Hello Gwen,

I'd check the container (container, table record, list record etc.) of the widgets inside the ballon widget's content and make sure that the width property is "fill" or big enough to fit the text or set the css style of the dates to "white-space: nowrap; " 

-cezarF



Hello @Gwen ,

@cezarF you can use "white-space: nowrap; " yes and if you want to go to more solutions you can use this.

Link: https://silvawebdesigns.com/limit-text-length-x-lines-using-css/

the clamp allows you to limit the number of lines!

Hi cezarF,

yes, the width property is fill.

will take as reference in future if I had similar issue in future! :D 


Thanks!!

Hi,

Thank you all for the help! It's my mistake that I had overlooked the value in 'expression' widget.

FormatDateTime(value, "dd/MM/yyyy 
hh:mm:ss tt")

 I've accidentally entered a new line after 'dd/MM/yyyy', so my time value always at the second line. 


Thanks for the answers and suggestions. It will would help me in the future! :)

@Gwen

Glad you found the fix :)  No wonder it was working out of the box when I tried to simulate the Ballon widget using your data. I thought it was related to screen size or browser view.

I'm keen to know if changing the css style to "white-space: nowrap;"  would have fixed it even with a new line. 

-cezarF

Nice that you found it!! :) Anytime @Gwen 

Regards,

Márcio Carvalho

Hi Gwen,

Just try to give the display : inline to the tooltip container and make the width !important to the tooltip class. 

Hope it will help you.

Thanks 

Prince

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