zIndex on toast with Dialog not working

[imdkbj]

Hey,

I have set the following props to the toast and toast is still showing in background when dialog is active.

<Toast ref={(el) => this.toast = el} position="top-right" style={{ zIndex: 10002, marginTop: 100 }} />

Is something wrong there!!

[mertsincan]

Hi,

The zIndex properties of Toast and Modals are the same. Please check; #1924

I think you can use baseZIndex property for this issue.

Exp;

<Toast baseZIndex={2000} .../>

Best Regards,

[imdkbj]

Still same issue.

[mertsincan]

Hi @imdkbj,

Thanks a lot for the update! I added 'toast' key to ZIndex option and autoZIndex option to PrimeReact api. Please see these issues:
#1924
#2088

If PrimeReact.autoZIndex is false, you can manually set the zIndex values ​​of the groups for your app. After 6.4.0 is released, Please try;

import PrimeReact from 'primereact/api';

PrimeReact.autoZIndex = false;
PrimeReact.zIndex = {
    modal: 1100,
    overlay: 1000,
    menu: 1000,
    tooltip: 1100,
    toast: 2000
};

Best Regards,

[imdkbj]

Hi,

Even with the new update, it's not working at my side, well toast zindex in greater than the dialog (Default).
Pls help.

[VsevolodGolovanov]

@imdkbj, this is probably a stacking context issue. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[bloodykheeng]

@mertsincan your solution doesnt work at all import PrimeReact from 'primereact/api';

PrimeReact.autoZIndex = false;
PrimeReact.zIndex = {
modal: 1100,
overlay: 1000,
menu: 1000,
tooltip: 1100,
toast: 2000
};

[bloodykheeng]

@mertsincan @imdkbj This is the correct way of setting it

learn from here for more info
https://primereact.org/configuration/

import { PrimeReactProvider } from "primereact/api";

function App() {
    const primeReactConfig = {
        zIndex: {
            modal: 1500,    // Default: 1100
            overlay: 1400,  // Default: 1000
            menu: 1300,     // Default: 1000
            tooltip: 1600,  // Default: 1100
            toast: 1700     // Default: 1200
        }
    };

    return (
        <PrimeReactProvider value={primeReactConfig}>
            <div className="App">
                {/* Your application components go here */}
            </div>
        </PrimeReactProvider>
    );
}

export default App;