Skip to main content

Hi ,


I am using toast component in my App.


I need to reduce length/size of the Toast. Please refer the screenshot below.


image


 <Toast open={toastErrOpen} type={Toast.types.NEGATIVE} actions={actions} onClose={onCloseErrCallback} autoHideDuration={1000} className="mondaystorybook-toast_box">

                We successfully deleted 1 item

 </Toast>

Could you please help on this?

Hey!

You just need to provide className prop and determine width in the corresponding class

Thank you @SergeyRo!

Hi @SergeyRo ,


Thanks for the response!


I have used className=“monday-storybook-alert-banner_small-container”. But still the size is not reduced.


<Toast open={toastSuccOpen} type={Toast.types.POSITIVE} actions={actions} onClose={onCloseCallback} autoHideDuration={1000} className="monday-storybook-alert-banner_small-container">

                 successfully deleted 1 item {JSON.stringify(toastSuccOpen)}

            </Toast>

Hello @Priya,


What did you use in your CSS for that class?


Are you sure the CSS file is connected with your file?

Hi @Matias.Monday,


I have imported the CSS file at the top.


//Styles  

import "../App.css";

import "./authorization.css";

import "monday-ui-react-core/dist/main.css";

Hello @Priya,


You need to style the component yourself using a class.

For example, if you are using the class in the previous code you posted, which is monday-storybook-alert-banner_small-container, then in your App.css, you will have a block of code like this below which will modify the width of that element.


.monday-storybook-alert-banner_small-container {

  width: 100px;

}

Here is a link to learn more about CSS

Thank you @kolaai!


@Priya is that what you were doing or where you missing that part?

Hi @kolaai & @Matias.Monday,


Thanks for your timely response!


The Above code is working fine.

Happy to hear that!


Thank you again @kolaai !

Reply


Terms & ConditionsCookie settings