React-toastify: Variable toast width

[jrc4]

There doesn't seem to be a hook to make the width variable so that it fits the text dynamically. The width property in the toast props drive this, and not specifying one defaults the width to a fixed 320px.

What is the preferred way to accomplish this?

Thanks.

[fkhadra]

Hello @mindontheblink,

The width can be changed via the css or the scss files. I'll post a sample later. Sorry for the late reply

[shirbr510]

@fkhadra I'm sorry I'm barging in, but it seems that it works via css with the solution you proposed, but then it doesn't align properly with position top-center

if you are able to give that a look at the same time, that could be lovely :)

[fkhadra]

@shirbr510 for the top-center and bottom-center position i'm defining a margin-left property as follow:

 &--top-center {
        top: 1em;
        left: 50%;
        margin-left: -($rt-toast-width / 2);
    }

&--bottom-center {
        bottom: 1em;
        left: 50%;
        margin-left: -($rt-toast-width / 2);
    }

So if you change the width via the css you also need to adapt the margin-left for top-center and bottom-center position as follow:

.Toastify__toast-container--top-center{
margin-left: - (your width / 2)
}

.Toastify__toast-container--bottom-center{
margin-left: - (your width / 2)
}

link to source

Now If you decide to rebuild the scss files, you only need to adapt the width in the variable file.

Hope you got enough information to solve your issue now 😁

[shirbr510]

Oh looks awesome!
Thank you very much!

On Wed, Jun 6, 2018, 21:02 Fadi Khadra [e-mail] wrote:

@shirbr510 https://github.com/shirbr510 for the top-center and
bottom-center position i'm defining a margin-left property as follow:

&--top-center {
top: 1em;
left: 50%;
margin-left: -($rt-toast-width / 2);
}
&--bottom-center {
bottom: 1em;
left: 50%;
margin-left: -($rt-toast-width / 2);
}

So if you change the width via the css you also need to adapt the
margin-left for top-center and bottom-center position as follow:

.Toastify__toast-container--top-center{margin-left: - (your width / 2)
}
.Toastify__toast-container--bottom-center{margin-left: - (your width / 2)
}

link to source
https://github.com/fkhadra/react-toastify/blob/master/scss/_toastContainer.scss

Now If you decide to rebuild the scss files, you only need to adapt the
width in the variable file.

Hope you got enough information to solve your issue now 😁

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/fkhadra/react-toastify/issues/189#issuecomment-395160665,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGJYEoOHY6d0sZjh2UU4Sq0q2Do0hAagks5t6BlSgaJpZM4UZ09J
.

[fkhadra]

@mindontheblink i'll close the issue. If you need more information, feel free to open a new one.

[candidature]

I don't know SCSS, can you please help with a simple way to define the width of toast to cover full text?