How to disable views button in StaticDatePicker in React MUI v5?
The problem is that we have disabled some days and they are honored on picker view. But if you click the pencil icon it component is as shown below
And in this mode the user can select any date which breaks our app.
How do we disable views button? If we can't, then how do we make sure user can cannot select any date?
Add below CSS in your code. This is just quickfix for normal users. pro people/hackers can still change this prperty from their browser and access the button.
.PrivateDatePickerToolbar-penIcon {
visibility: hidden
}
Live Demo
Another answer could be to disabled the toolbar showToolbar={false}
Related
I am using material-ui as the UI package for an app.
In the app I'm using material-table with a custom infinite scroll.
When a row is clicked, a drawer opens from the right of the webpage.
Once the drawer opens, the background of the drawer (the infinite scroll table and general page) automatically scrolls back to the top of the page.
This makes this page very unfriendly to users.
I've tried the solutions that are mentioned here, but it doesn't seem to work.
I tried to use it like this:
<Drawer ModalProps={{disableRestoreFocus: true}} disableRestoreFocus>{content}</Drawer>
I couldn't find anymore information on material-ui github, or here on stack overflow.
Has anyone encountered this issue or know any other options I can try?
Thanks in advance.
For material-ui v4, you can add this attribute on the drawer component:
disableScrollLock={true}
I added a custom button to my header to 'undo' actions in my calendar. It is working fine, but I cant find out how to disable my custom button when there are no events in my action history.
For now, I just skip my actions in the handler, but I want to customize my button to LOOK disabled.
There seems to be, since full calendar implements a disabled button for 'previous month', as shown in the example.
Is there any way I can achieve this?
I'm using full calendar v4.
Is it possible to disable media picker bar only when user typing on for my chatbot?
You can disable to composer input, which will then disable to media picker, too. Looking at your screenshot you already use the persistent menu. It has a property (composer_input_disabled), see https://developers.facebook.com/docs/messenger-platform/reference/messenger-profile-api/persistent-menu/
My typical workflow when choosing styles for a component is to use the dev-tools in the browser to play around with the styles until I'm happy with the look, and then copy the chosen styles permanently back to the code.
But if I want to see the dropdown in react-select, I need to click it. When I click back to the dev-tool, the dropdown disappears as the component is de-selected.
Is there a way to keep the dropdown open as I style it?
Here's a sandbox if you want to try: https://codesandbox.io/s/4rlmrp38j7
I just found the prop menuIsOpen which will force the dropdown to stay open.
However, if there is a way using the dev-tools or another method I'd be interested in that too and will happily mark that as more robust and correct than this answer.
You would recommend you to use some extension to inspect the code React:
for chrome
for firefox
Then in react-select v1 you can set isOpen and in v2 menuIsOpen to true without changing you code.
I will also suggest to take a look at this page and directly in the source code on the repo github to have an idea of the default style.
When setting up React VR you get a bundle with already customized full screen button and a button for straightening up camera, which has no name and no customization options:
I have changed the camera rotation principle in client.js and now the button is not working correctly.
How is that button called?
Is there an API for it to customize it?
Is there a way to disable it?
This is kind of a hack but...
That is injected once the app inits and at this time I know of no API to customize it but the good news is it is DOM. You could add some CSS to your page to disable it or restyle it (assuming you have no other SVGs on your page).
svg {
display: none
}