Longer text that ends up on multiple lines looks ugly

[andreiP4]

Hi,

I am using the toasts to display some error messages from an API response, and sometimes the error message is longer than one line, causing the text to be very close to the bottom border of the toast. I tested other cases with some very long messages, and the toast would just slice the text to a certain amount of characters, while the rest don't get displayed.

Here's some examples:


Actual message:
this.toastServ.error('dhagsoiudshadoijuhasoiduahoisudbsaiudbasodnoiuansdoasndasopdaiudyaospfasjnfasipfjasojfoasjfiaiosfnjaosjfoiaspfapsiofhaoshfiuoaofpasfoasfa dhagsoiudshadoijuhasoiduahoisudbsaiudbasodnoiuansdoasndasopdaiudyaospfasjnfasipfjasojfoasjfiaiosfnjaosjfoiaspfapsiofhaoshfiuoaofpasfoasfa');

My question is, is it possible to change the toast styling ourselves to accommodate for longer texts? In this case I would only need a bit more height, but width could also be nice for some people or use cases.

Also, forgive me if this option was there already, but I couldn't find it documented anywhere.

Thank you!

[andreiP4]

Forgot to mention, using the latest version (^1.0.7)

[Lerke]

@andreiP4 I'll look into this for you - I'm kind of surprised the toast doesn't grow according with its content already.

[Lerke]

Hi @andreiP4 I've pushed version 1.0.8 which should address larger toast bodies. Can you check if this works for you?

2024-09-26.08-56-36.mp4

[Lerke]

As for altering width: I see that the width is set to the width of the toast container. You could try overriding the CSS class .toast-container its width. See: https://github.com/scenius-software/angular-toastify/blob/master/projects/angular-toastify/src/styles/_toastContainer.scss#L7

[andreiP4]

Hi @Lerke I updated to the latest version, but the issue persists.

I am not able to use the scrollbar, although it is there.

I also tested this on the demo website, and the issue is the same. This time I don't even see the scrollbar.

I don't think this is browser-dependant, as I am using Chrome, and I also tested using Edge, with the same exact results..

I'll try overriding the css classes for width, maybe I can also find a fix for heigtht. I'll keep you informed if I succeed.

[Lerke]

@andreiP4 Ah, unfortunate. I don't think the demo page has been updated since 2021, so that's probably correct. I have tested in Firefox, but I'll do so again using Chrome.

[andreiP4]

I can give some suggestions, if you don't mind, as I've worked a bit before with css (only with inline tailwind though), although I'm not sure that they would provide the fix. In the _toast.scss file, you could try to set overflow:auto and also add word-break:break-word. Maybe this works, maybe it doesn't, but I just wanted to give some ideas.

[andreiP4]

It also broke with normal text sizes:

The x button is misplaced and the scrollbar is there even though there is no need for it.

[Lerke]

@andreiP4 Suggestions are always welcome, thanks! I'll try them out when I can.

[Lerke]

@andreiP4 Do you happen to use any css framework in your project? The scrollbar being present is a mistake I made by making use of overflow: scroll instead of auto. But I can't replicate the other styling issues you have: The non-functional overflow, missing error icon and displayed close button.

I'm working on a 2.0 release that prefixes all our css classes with angular-toastify- to prevent class conflicts, but I was wondering if this could be the issue.

[Lerke]

@andreiP4 I've pushed a development version to our npm: 2.0.0-dev1. Can you check if this improves things for you at all?

I've also updated our pipeline to keep our Github pages demo up to date @ https://scenius-software.github.io/angular-toastify/

[andreiP4]

@Lerke I'm using bootstrap as part of a dashboard library that I'm using, so that may be the cause. I'll check tomorrow morning and update you with results. Thank you for your efforts!

[andreiP4]

@Lerke just checked it and tested with a very long message, and it works just fine! Thank you for updating it!

[Lerke]

@andreiP4 Great to hear. I guess this issue can be closed then? I've republished the 2.0.0-dev1 release as 2.0.0. It has no further changes :)

[andreiP4]

@Lerke yeah I think it can be closed