I've implemented an autocomplete multi-select field based on the Downshift with Popper Material-UI demo. That worked well up until I tried to reuse the component within a Material-UI Dialog. The Popper appears behind the mask of the Dialog.
I've modified the Material-UI demo as an example of this behavior: https://codesandbox.io/s/76moj1mq1.
Looking at Material-UI's old auto-complete solution, it use to use Popover instead of Popper. I tried substituting that in to see if it's z-index would be higher than that of the Dialog, but I think Popover steals focus from Downshift in a way that triggers the autocomplete to close immediately after it opens. Here's an example, again modifying Material-UI's demo https://codesandbox.io/s/wk84p1myz7.
Any ideas on how I can make either approach work?
Overriding z-index on the Popper to be above the 1300 that Material-UI defaults dialogs to works, but I was hoping to avoid having to do that if possible.
Related
Is there a Material UI component that is like a container/box with an arrow coming out of it like tooltips can do? I'll insert a screenshot of what I'm trying to do below. The only way I can think of right now is to just use tooltip and set open to always be true, but i was hoping there was an already built component for this that i just cant find
I am pretty sure MUI doesn't have a component like that. Otherwise you should customize a Paper component, Popper or Box or style a div.
Im making an extension and I'm curious is it possible to add a search filter/box to a tree component?
Im currently coding the extension in javascript but im not sure if its possible or not
This is what i want to add in at the top of my tree view
It will be built-in to vscode in v1.70. Here it is working in a treeView that I wrote for vertical tabgroups:
The placement of the find widget is a little unfortunate right now.
WHen you have focus in the treeView Ctrl+F is bound to the command list.find which brings up the Find in list/treeView widget.
You need to enable the filter option icon to see it work.
I'm trying to integrate the Material UI tabs (https://material-ui.com/demos/tabs/#centered), but I get a weird glitch on Safari 12.0.3, Chrome 73.0.36 and Chromium. The blue underline isn't shown at the right place until I click on one tab title:
The code is very simple and directly copied from the documentation:
https://gist.github.com/lcoenen/0f93bd2a2ae3fe9c76135d6b3d73d130
As you can see in the comments, I found a workaround by waiting a second, then setting the state to my default tab.
But is there a more elegant solution or should I create an issue on material-ui GitHub?
In my case the issue was related to a css used:
transform: scale(0.9);
if the scale is different from 1.0 then the tab indicator is at the wrong place...
Is there a way to add a custom column menu tab with my own favourite icon which on click would render my custom react component?
something like
myColDef.menuTabs: ['generalMenuTab', 'filterMenuTab', 'myCustomMenuTab']
FYI I'm using v12.0.2
What you're after can't be done I'm afraid. The grid supports React components in all sorts of ways (renderers, editors, filters etc), but not via the column menu.
I've updated the docs page to remove the gibberish issue - it'll be fixed properly in the next release, thanks for highlighting this.
This would be helpful to have. In particular for us, we'd like to filter based off row properties, and not row values. Creating our own tab to filter by cell colors that we have assigned with our own set of labels would be useful.
I agree that it would be a nice feature to have. Apparently, there's no quick out-of-the-box solution to do it. The only workaround I see is to implement your own custom Header component which would display any buttons your want.
There you can put a button to open your own custom menu, which you can implement as any regular UI component. It also means you'll need to manually implement all standard menu options that Ag-Grid provides out of the box if you need them.
I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.