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
Related
I am using the react-site-nav package in a react application with typescript. I am having trouble styling the navbar.
I want the navbar to have a logo on the left end and a button on the right end, and the links to pages should be in the middle. I can't figure out how to add a logo to the left end of the package navbar.
I used flexbox and kept the items in a row, but when I put the SiteNav element in a flexbox div that has padding, the drop-down menu of ContentGroup gets displaced by the padding. I don't know how to offset the padding for the ContentGroup. Changing the style of the content group by subtracting the padding is what I think could be my solution.
Any help would be appreciated, thanks!
[link to navbar package] (https://www.npmjs.com/package/react-site-nav)
<SiteNav>
// add an image that is at the start of the navbar
<ContentGroup title="About" height="200">
Some text 1
</ContentGroup>
<ContentGroup title="Contact" height="200">
Some text 2
</ContentGroup>
// add a button that is at the end of the navbar
</SiteNav>
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'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the div, the height of the text field changes to 496px. Adding maxHeight style doesn't prevent a limit and once you interact with the field, it returns to normal (16px). Has anyone had this interactions with transition and mui text fields before?
In a react native screen, the top part is a flatlist, and the bottom part is a toolbar, with some buttons in it. And, there is also a hidden component which shows when a button is pressed. What I hope is, when the hidden component is showing, the flatlist is pushed up, so that lower part content of flatlist will be still on the screen.
But the reality is, when the hidden component is showing, it covers the flatlist. I have no way to make flatlist component automatically be smaller.
How to resolve this issue?
thanks
Try styling all three component using flex.
for e.g.
give flatlist flex:3
hidden button flex:1
toolbar flex:2
And now when button appears, height will be automatically adjusted.
Using a StackNavigator from React Navigation, when performing the back gesture (swiping the top card from left to right to pop it off the stack) there is a bright white overlay that appears on the card below. How do I change the color of that overlay or remove it?
You'd need to create your own Transitioner. Essentially create an Animated View that wraps your scene and adjust the opacity. See the docs with more info and examples.