search

Wolox / react-chat-widget

Awesome chat widget for your React App
MIT License
1.45k stars 458 forks source link

the 'X ' close mark gets hidden in mobile device view #160

Open UxplnJDK opened 4 years ago

UxplnJDK commented 4 years ago

I am using this widget in my react app and the close × mark is hidden in mobile device view..it is covered by sticky navbar and i can't close the widget properly..can we increase the z index value to solve this ..if so what class to overide ising custom css.if other solutions please post or reply.Thank you

aknewcomp commented 4 years ago

Hey,

'rcw-close-button' is the classname of the button you are after. You can go after it in the css via '.rcw-close-button' and do whatever you need to the button.

Hope this helps.

UmerMIB commented 4 years ago

Hi there I'm also facing this issue . Let me know if you had solved this issue by any mean

bilaltahseen commented 4 years ago

You can do this by adding z-index in style.css in node_moudles/react-chat-widget/libs/ just find style having media query on it i.e @media screen and (max-width:800px) { .rcw-widget-container { height: 100%; height: 100vh; margin: 0; max-width: none; width: 100%; z-index: 1201; // Custom Z-index depnding on your applied theme pre-defined z-indexes } } For example if you are using with material-ui then you can find their predefined z-indexes over here

mobile stepper: 1000 speed dial: 1050 app bar: 1100 drawer: 1200 modal: 1300 snackbar: 1400 tooltip: 1500

in my case drawer was causing the bug so i added 1201 z-index on my above defined class and its works.