I want to render a react-chat-widget positioned over a google-map. When I do this the widget container (minimized space until clicked) is preventing me from being able to interact with part of the map. How do I overlap components so that only the 'active' component is functional?
You can fix this by CSS. Change the component CSS position: absolute. If required use z-index to make the component visible. I believe the problem is the overlapping component is occupying the entire widget space rendering the other one unclickable.
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
How to make sure that Draggable component do not go ouside the Dropable Area or some specific div in react-beautiful-dnd??
I want to make sure that the draggable component do not go outside of some specific div or area or outside dropable area.
In current time I could not find any work around to restrict the movement of Draggable component in some specific area or container. Any help and suggestion in most welcome.
Thanks
You can use react-sortable-hoc for this. It lets you lock your sortableElement to stay in the sortableContainer by passing lockToContainerEdges to the HOC. react-beautiful-dnd also has one big limitation that it only works in one direction i.e either horizontally or vertically but with react-sortable-hoc you can pass axis='xy' to the sortableContainer HOC and it lets you sort in a grid.
My issue stems from wishing to have a mobile phone rendered in the page, which mimics that of an actual phone. I would like to use components from Material UI such as AppBar and Dialog, however they do not stay confined to the container of the phone, and instead still show in the entire browser window.
When I use a Dialog Component however, it's still relative to the actual browser viewport, and not that of the "phone", such as the following:
I would like it to do what is seen in the picture below, without using an IFrame.
Is there a way I can set an anchor for the components - or at least force them to treat a specific element as their boundary? Thanks.
For those wondering if this is resolved, the solution was to roll my own Dialog and Backdrop Components with Paper, and Box components.
A ref was passed into a Box component which surrounds the entire "Phone App", and it's current Element is passed into a Mui Portal's container property.
This allows for the container of the Custom "Dialog" to be the container I wished to have things bounded by.
Does react-toolbox card component (http://react-toolbox.com/#/components/card) offer any expandable option similar to material-ui cards? (http://www.material-ui.com/#/components/card)
Nope, it doesn't. You can add an onClick handler on the container component that changes the className of the container element with a different height (and include a CSS transition for height so it animates). It's pretty straightforward to do so. Let me know if you need more assistance.
The new Stepper component is awesome, except that the height of each step won't adjust properly when its child components change from hidden to visible, or vice versa via CSS. Specifically, if a component's style changes from display: 'none' to display: 'inline', the height of content will remain the same. As a result, the newly visible component won't show properly.
However, if the component is dynamically created (as opposed to be made visible with CSS), the height would adjust properly. Unfortunately in my case, I do need the component to be there even when they're not visible.
Has anyone encountered similar problem? I'm using react.js v0.14 and material-ui v0.15.0-beta.1.