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 ?
Related
I use React MUI and some components disable my draggables.
I have put draggables on my page, that works perfectly.
When my draggable is dragged, I change some nodes in the page.
I'm on React MUI and I use tooltips, modals and menus on that page. After opening one of them and close it, no draggables can be dragged anymore. I mean that changing some nodes in the page makes that the drag ends directly.
Is there an event inserted or something like that that ends the drag action if an element is changing in the page ?
I found a workaround.
Actually this happens on Chrome and Safari only. Adding a setTimeout of 10ms before changing the DOM makes the job.
I have a loading overlay that uses the MUI Backdrop component. This works perfectly fine until I have a MUI Dialog open or a MUI Drawer open. In these scenarios, the Backdrop component renders behind the Dialog or Drawer. I have tried even throwing an !important on the zIndex of the Backdrop and setting it to 10000 and it will still render behind the Dialog or Drawer every time.
Has anyone else ever had this issue and been able to figure out how to get the Backdrop to always show up on top of any element on the page?
without a code example I am not 100 but I hope this helps... both Drawer (via passing modal in its props) and Dialog use the Backdrop component. So perhaps it is the parent div which zIndex needs to be altered? In sandbox below I found wrapping the Backdrop into a Grid and then setting the zindex on the parent/Grid works. Here's various setups of Backgrounds with Drawers and Dialogs :
https://codesandbox.io/s/romantic-firefly-44s63k?file=/src/temporary-drawer.js
https://mui.com/material-ui/api/dialog/
https://mui.com/material-ui/api/modal/
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
Is there any component similar to ext.window in react?
I checked bootstrap/material ui and the closest thing to a window are modals, but I would like to find something resizable and draggable.
You can try specific components that do this, like react-rnd.
See the demo, you can both resize and drag the created component.
Here, you have a live example in codesandbox.
What you need is a draggable modal with React implementation:
Bootstrap draggable modal
https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503
Material UI draggable modal
https://codesandbox.io/s/nnq98zlrrl
I've been using Material-Ui for a while.
There's a standard modal and dialog (like a modal but with default template for easier customization)
Isn't modal (dialog) sufficient for the job that you want?
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle