search

scenius-software / angular-toastify

A somewhat minimalistic clone of React Toastify.
https://scenius-software.github.io/angular-toastify/
17 stars 5 forks source link

Longer text that ends up on multiple lines looks ugly #54

Closed andreiP4 closed 1 month ago

andreiP4 commented 1 month ago

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: toast toast2 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 commented 1 month ago

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

Lerke commented 1 month ago

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

Lerke commented 1 month ago

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

https://github.com/user-attachments/assets/66b9b3e8-f5d1-4ef0-9b4a-dfc36e28e1de

Lerke commented 1 month ago

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 commented 1 month ago

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

image 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. image

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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

It also broke with normal text sizes: image The x button is misplaced and the scrollbar is there even though there is no need for it.

Lerke commented 1 month ago

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

Lerke commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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

Lerke commented 1 month ago

@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 commented 1 month ago

@Lerke yeah I think it can be closed