i have use antd 4.6.1 in my react project, here i use antd modal, drawer, select, drop down and more here if i open any one of mentioned things, like now i open modal, modal is opened, modal scroll is working, with the modal scroll, body scroll also working just like that all kind of element reacting, by default if any of modal, drawer or select opened, in body overflow hidden property not added that's why it's happening, i don't know why it's occurred,
i have search lot, https://github.com/ant-design/ant-design/issues/21539 here they said to need to add overflow hidden property manually when those all open and remove it when those closed using normal javascript code, this is actually not a best solution for this situation,
so kindly assist me, how do i resolve this issue, Hope here i can get better solution
Helping hands are appreciable,
Related
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 am working on a React project where I have used CKEditor 4 on Material UI dialog. When I am trying to use advance options like Math. I am not able to type in, anything on input, textarea fields. I have searched for solutions but all the solutions are with respect to Bootstrap Modal. If anyone has faced the same issue using the Material UI dialog. It will be a great help if you can share the solution.
Solution for Bootstrap Modal: http://stackoverflow.com/a/18554395/778587
Material UI dialog: https://material-ui.com/demos/dialogs/
Attaching the Screenshot for the reference.
Steps to reproduce the issue. - Open https://codesandbox.io/s/vv50789765 for code example
Step 1: Open CKEditor and click on the picture icon highlighted in the screenshot.
Step 2: Once you click on the picture icon another popover will be opened with some input form elements. None of the input form elements is editable, I am not able to type anything in the form elements. Please refer the screenshot.
One of the Modal props is disableEnforceFocus:
If true, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
Without this property set, every time you try to change focus to one of the input fields in the ckeditor image dialog, the Material-UI Dialog (which uses Modal) automatically brings focus back to itself.
Here's a version of the sandbox with disableEnforceFocus specified which then works:
https://codesandbox.io/s/80pu0
I have recently used Semantic UI to display a modal box in my app. In the modal box is a for, when the form is submitted the values of the forms feilds go on to be used in various ways. My issue is when the page posts back the form feilds are losing their values? For instance a text box that was filled out just appears as empty? However if I move the logic outside the Modal Box it all works fine? Also I have a link that when clicked fires an event in a code behind page, however when in the modal box the event does not fire?
Does anyone have any idea what might be causing these strange issue? It would seem from some things I have tried that its the javascript showing the Modal Box which is causing issues. If I manually add a class to show the modal box and disable the javascript which was causing it to show previously my logic then works fine?
Any help one this would be great im running out of things to try.
For Reference:
Heres the modal box im using http://semantic-ui.com/modules/modal.html#/definition
Here is how to show it according to the docs $('.ui.modal').modal('show'); this is what i believe to be causing the issues
EDIT:
It looks like something in the javascript is rendering the modal just below above the closing body tag regardless of where it is in the context of the website?! This certainly part of the issue, however I fell there is still something else going on
I've had a search and I couldn't find anything & also it's my first time using the site so hope it hasn't been asked.
I've run into a situation. I'm by no means an experienced website maker. I'm learning as I go. I have a CSS drop down menu that works fine on desktop browsers. When I get into the realm of mobile I encounter a problem, namely that :hoverdoesn't work (obviously).
I found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly but I can't get the ruddy thing to work.
The page in question I'm applying it to is here : http://www.inkslinger.co.uk/calibre/index.html I really can't work this out and its driving me absolutely batty. Any help would be really appreciated.
I had the same problem and found an easy workaround which I have used here
hover example
The Post Natal and Ante Natal options, when hovered over, trigger the drop down, but you may notice that they are NOT links themselves. In my original model they were links, but when I realised this would not work on touch devices, I simply made them into triggers for the drop down boxes, and put the links inside the boxes too. So for you, your 'What we do' link, would not be a link, just a trigger for the dropdown menu, and then in the menu you can have your link to the 'what we do' info.
It is also worth remembering that certain touch devices, such as some iPads, do not like hover states at all, if you find that the hover state won't trigger your dropdown menu, then add 'onclick="return true"' to the list item in question. This will usually make the hover state work like a click.
Hope this helps, what I've written represents about 3 days of poring over my library of reference books.
We had this problem and changed the hover to clicks.
Instead of using hover, which is of course impossible on touch devices, using :active would likely be a good start. Selection something is still possible on touch devices, bind the menu to the active state of a toggle and you're done.
You will have to switch from hover to click event for this case. There's no workaround for that.
You should definitely consider changing your design to have a hamburger styled menu which opens from left for touch devices.
See this demo from the link that you posted. It changes to a different menu style when you open it in mobile device.
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/
Also if you want to have your top link as a direct link to other page; you can have two separate clicks on the top button for that. First click will open the menu and after the menu is opened you can assign the direct link to it as done in the above demo.
Put this line of code inside your head tag like this:
<head>
<script>document.addEventListener("touchstart", function(){}, true);</script>
</head>
Create for your hover element an active class like this:
element:hover, element:active { Your CSS }
Voila.
http://findaccountingsoftware.com/directory/gba-systems/fams-fixed-assets-management-system/
this site contain a tab container. On Applications tab clicking on + sign it goes to expand, I want to know this process name. How to do it?. There is a strange thing occur clicking on + sign expand automatically scroll move and focus on text. What this process name is. How to do that?
This effect is called an 'accordion' menu. jQuery UI has a great one which you can use and also has some great documentation explaining how to use it :)
http://jqueryui.com/demos/accordion/
Beautiful full customization accordion in Bootstrap.
Please refer the following documentation.
https://getbootstrap.com/docs/5.0/components/accordion/