In Material-UI, The FlatButton, when is clicked, it will animate a ripple, ripple will start where you click the point, how can I change the ripple will start in the FlatButton center?
example: in the below picture, the ripple started from the top right.
enter image description here
You can set the undocumented centerRipple property (boolean) on the FlatButton:
jsFiddle: https://jsfiddle.net/dymkau2b/1/
<FlatButton centerRipple label="Center Ripple" />
(The ={true} is implicit in JSX)
Related
When I add a wide table of component 'CreateTable' inside the React SyncFusion RichTextEditor (using v20.3.50), bigger than the screen, and click the items within the overflow, the popup menu of the Table (for columns and rows interactions), goes to the right, watching the css of the div, the left value is bigger of what I've scrolled. The first solution was to fix the popup to the middle with a left: 50% !important css property but what I would like is that the menu stays in the clicked cell.
<RichTextEditorComponent
style={style}
value={value}
iframeSettings={{ enable: true }}
id="imageRTE"
ref={setRteObj}
toolbarSettings={toolbarSettings}
created={onCreate}
quickToolbarSettings={quickToolbarSettings}
enableResize={true}
>
<Inject services={[Toolbar, Image, Link, HtmlEditor, Table, Resize, QuickToolbar]} />
</RichTextEditorComponent>
We have included the fix for the issue "Table quick toolbar got misplaced outside the Rich Text Editor when enabling IFrame" with our patch release version 20.4.43. So please upgrade your package to the latest to resolve the issue from your end.
Release Notes: https://ej2.syncfusion.com/documentation/release-notes/20.4.43/?type=all#richtexteditor
I have a loading overlay that uses the MUI Backdrop component. This works perfectly fine until I have a MUI Dialog open or a MUI Drawer open. In these scenarios, the Backdrop component renders behind the Dialog or Drawer. I have tried even throwing an !important on the zIndex of the Backdrop and setting it to 10000 and it will still render behind the Dialog or Drawer every time.
Has anyone else ever had this issue and been able to figure out how to get the Backdrop to always show up on top of any element on the page?
without a code example I am not 100 but I hope this helps... both Drawer (via passing modal in its props) and Dialog use the Backdrop component. So perhaps it is the parent div which zIndex needs to be altered? In sandbox below I found wrapping the Backdrop into a Grid and then setting the zindex on the parent/Grid works. Here's various setups of Backgrounds with Drawers and Dialogs :
https://codesandbox.io/s/romantic-firefly-44s63k?file=/src/temporary-drawer.js
https://mui.com/material-ui/api/dialog/
https://mui.com/material-ui/api/modal/
I have a react project which has top appbar with responsive drawer on left side. This appbar is responsive with FormControl items in it. On open the left nav drawer pushes the content to fit responsive and in the top appbar, FormControl wraps down, changing height of the top appbar. Am able to capture this change in height for all items in the side nav, except for the menu button on top left and IconButton inside of it.
I want to capture the accurate aapbar height to push the content below of it, which is not happening for click on Menu and inside IconButton button.
I used react ref for this, still does not give me accurate dimensions.
Attaching working example:
https://xzbot.csb.app/
If you reduce the window and click on menu button, as the drawer expands, second languages item wraps down and increases the height of appbar.
Any suggestions how can I get proper height of the top appbar much appreciated.
Thanks,
Gautam
All the material-ui examples show Toolbar inside Appbar. Why not just Appbar? What's the difference between the two?
https://material.io/design/components/ does not have Toolbar component, only "App bars: top".
https://material.io/develop/web/components/toolbar/ says "The existing MDCToolbar component and styles will be removed in a future release"
So will material-ui Toolbar go away eventually?
I was looking at the default CSS properties produced by each component. The main purpose of Toolbar is to display its children with an inline display (elements are placed next to each other), something Appbar doesn't do. The AppBar component uses display: flex and flex-direction: column, that means direct descendants are stacked on top of each other. On the other hand Toolbar uses display: flex too, but doesn't set flex-direction, which means it uses its default value: row. That being said, the Button component uses display: inline-block. That is the reason why elements are placed next to each other inside Toolbar components.
Let say, for example, we have an Appbar with a Toolbar with two Buttons as children:
<AppBar>
<Toolbar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</Toolbar>
</AppBar>
The result of this code is:
But, if we remove the Toolbar and place the Buttons directly under the AppBar component:
<AppBar>
<Button variant="outlined" color="inherit" >
Button 1
</Button>
<Button variant="outlined" color="inherit">
Button 2
</Button>
</AppBar>
the result will be very different as shown below, because now the buttons are direct descendants of the AppBar component and so, they will be stacked on top of each other.
As you see, AppBar and Toolbar have different purposes. Thats why I think Toolbar will never go away.
The AppBar is used to structure your document. You put in content what you would normally place inside a tag e.g the title of your page and navigation links. If you examine your page by pressing F12 you will notice the AppBar created a <header> tag.
-> So the AppBar is used to give your page a place to put in introductional and navigational content
You can visualize the Toolbar as a real life tool belt. In the virtual world instead of tools we place icons and buttons on it. You can also add your brand name inside the tool bar just like manufacturers do that on their belts.
-> The toolbar is a wrapper where you can place elements in a horizontal line.
AppBar can be used without a Toolbar and a Toolbar doesn't have to be placed inside a AppBar. If you want your header to look like a toolbar it makes sense to do <AppBar><Toolbar>...</Toolbar></AppBar>. If you want a bar at the center of the page just to show off icons a Toolbar without a AppBar would make sense.
I am trying out react native navigation(v2) for my app, and I can't get it to change the background color of my statusbar.
I am able to change the background color of my topBar, but that doesn't affect the statusbar background color. In iOS statusbar color automatically takes the same color as the tintcolor given to the top bar, how do I replicate the same here?
You can use the Statusbar api directly from react-native to your Parent App level Component
To set the StatusBar to translucent you can pass it as a prop as mentioned here and change the backgroundColor according to your needs as
<StatusBar translucent backgroundColor={'#fff'}/>