I have a Reactstrap Modal: Modal - Reactstrap
I would like to use this modal as a I would use a "normal" div in a page layout.
I.E. Show the modal inside the page with the same design, just without it popping in and out, and blurring the rest of the page.
Is this possible?
You will have to modify or override the CSS files of Reactstrap to achieve that. But it would not be a Modal any longer. It is better if you ask about what you want to achieve. You don't need to use modals to show a div with a toggle button.
Related
I'm creating an library of components in Angular 8. Right now, I'm creating a modal component that display a window dialog. I want to block focus outside of modal to user only can focus buttons inside of modal with the Tab button. What is the best practice to do this?
The content of this control could be generic. I mean, the user can set a custom content. So one solution could be set tabindex = -1 to elements outside modal to block its focus.
I suggest to use angular material CDK for this. Specifically cdkFocusTrap which traps focus inside some element.
Example from the docs:
<div class="my-inner-dialog-content" cdkTrapFocus>
<!-- Tab and Shift + Tab will not leave this element. -->
</div>
when I use a KendoReact DropDownList into a ReactBootstrap Modal the expanded list appears UNDER the modal so it can't be interacted with.
I read several issues that was pointing to a focus loss, which is not exactly my case, due to the fact that Kendo PopUp was append to body instead of the Modal itself, and the 'appendTo' prop seems to be a good solution for me but it exists only for the Kendo PopUp component, not for the Kendo DropDownList one (which uses PopUp underlying)...
I've made a repo illustrating this issue : https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal
And a LIVE demo for this repo (take some time to load):https://react-kendo-dropdown-into-boot.herokuapp.com/
Set bigger z-index for the animation container of the popup using CSS. And it will be on top of the modal to resolve it.
.k-animation-container{
z-index: 10000
}
Leave it to be rendered into the document. Since if you render it using appendTo to the Modal, the DropdDown will not be entirely visible when opened, or scrollbar will appear in your dialog. This is the purpose it is rendered into the document.
#Xizario's answer didn't work with V4.14.x
The solution that finally worked was to use ZIndexContext.Provider from '#progress/kendo-react-common':
<ZIndexContext.Provider value={10003}>
<DropDownList {...yourProps} />
</ZIndexContext.Provider
I have a site with a bootstrap collapse in it. I am trying to make it open programatically when the user selects a certain radio button, its working but the collapse does not animate in it just pops in.
The code I'm using is:
$("#RadioBtn").on('change', function(){
$("#RadioCollapse").addClass('in');
})
I suspect I may have to do something involving the collapsing class, but I try applying that class to the element and it didn't animate either.
Just found bootstrap has its own built in function .collapse(); so all I had to do was
$("#RadioCollapse").collapse();
What's the recommended way to do this?
Here's an example of what I've done http://jsfiddle.net/T9QHw/56/
Normal dropdown on the left, and the div version on the right.
But the div acts a little funny. It closes itself if I click on it, and styles a tags as blocks.
Should I be doing this a different way?
Perhaps you want to be using the Popover component instead of the Dropdown component?
I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?