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.
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,
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!
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
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; "
Hi cezarF,yes, the width property is fill.
will take as reference in future if I had similar issue in future! :D
Thanks!!
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
Please set the tooltip min-width css property to auto .
Hope this helps
AD
Hello @Gwen
Were you able to achieve what you needed?If so could you share with the community for future notice and, if that's the case, mark the answer you used as the solution to help the other community members?
Cheers,GM