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.
Related
I'm using material UI for my React js project and I want to change the outline color of menu. If you know how to do please write down your answer.Thank you....
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.
In a map application based on Leaflet, I would like to have a large application menu, kind of a settings menu. I managed to put a nice button into the top right corner as a L.Control and it gets fired on a click.
The menu should position either to the left of the menu button or simply in the middle of the screen.
I am wondering whether it is best practice to use
a Popup,
a Layer,
another Control or
just position a at the right place on the page.
Trying the latter, I found that I have to set z-index to a very high value to see it, and it feels a bit odd not to use the Leafleat features.
What would be the "right" solution to use with Leaflet?
If you want a full screen map, you can use https://github.com/Turbo87/leaflet-sidebar
I use it here: http://franceimage.github.io/map
You can create a nice customized icons based toolbar using Leaflet easybutton plugin.
You will have all the leaflet based controls (Click, hover, position etc.) to set that up as per your requirements.
Here are the implementation examples:
http://danielmontague.com/projects/easyButton.js/v1/examples/
and github repo: https://github.com/CliffCloud/Leaflet.EasyButton
I am looking for tooltip/widget/popup panel like this one
Any idea for such tooltip in GWT ?? I tried ballon widget in gwt,but that does not help me,i need a tooltip like the one above that should also be selectable!
PopupPanel is certainly your best start. PopupPanel will get you an undecorated square box like your example, with user interaction.
Depending on your design requirements you can setup the content with straight HTML (embed an HTMLPanel, with the HTML as contents, inside a PopupPanel), or lay it out using the GWT layout tool.
Also look over: DecoratedPopupPanel for some ideas about decorating the border of your panel with css rules. This may help with the little triangle pointer at the top.
One more hint: you might end up embedding a FocusPanel in your PopupPanel if you need to track events outside specific GUI elements.
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.