Long messages are cut off the page

[cracell]

I have an issue where if I have very long messages in the alert then they are cut off of the page.

It's due to the position fixed initial style { position: 'fixed' } https://github.com/schiehll/react-alert/blob/d1f424ac06647bb84d6b1a9ecbb66dfca08b3839/src/Wrapper.js#L5

And the fix for me is to set the position to absolute instead of fixed. Would you accept a PR that allows the user to override the initial styles via the options?

[Jazzepi]

I had a need for something like this too. My problem is that react-alert attaches a div to the body tag without any identifying information, and I need to style the <div> wrapper to increase it's z-index. I'm using another library which also uses z-index, and 100 is too small so the alert ends up behind everything.

This is my workaround, but I would prefer something less unstable.

// Unfortunately the library react-alert creates an element tree with no markup on it so we just have to grab the last div element
body > div:last-of-type > div {
  z-index: $zindex-modal + 1 !important;
}

EDIT: See below post. I missed a property on the Provider that exposed what I needed to style.

[Jazzepi]

Nevermind I found the containerStyle property on the AlertProvider and was able to style the z-index that way.

<AlertProvider
  containerStyle={{zIndex: 1051}}
  timeout={TEN_SECONDS_IN_MILLISECONDS}
  template={({ style, options, message, close }) => <AlertMessage style={style} options={options} message={message} close={close}/>}>
  <AppNew/>
</AlertProvider>

[besLisbeth]

Hi @cracell, did you find the workaround? I do not understand how it was cut off the page, do you have an example or screenshot at least?

[schiehll]

Closing due to a long time without a response providing a reproduce example.

Feel free to ask to reopen if you provide a link to a codesandbox or something.