I created a simple app to work through an issue I'm having toggling a sidebar. I'm trying to use onClicks so that I can open and close a sidebar, and yet can't get it to work. I'm using styled-components, and for whatever reason I can't get the sidebar to toggle. I have a simple piece of state, isOpen, which is initialized to false, and when i click on a button in the 'navbar', i'd like it to toggle state to true via an onClick, and the sidebar should appear, and yet, it isn't working.
Here is the codesandbox link
I tried re-writing the app from scratch, using destructuring vs not using destructuring, and looked for any bugs in the code but couldn't. Any ideas for what I can try next? Also I made sure to use arrow functions for my onClicks.
The first issue I see is that the SidebarContainer is creating an overlay that prevents clicking on the button to open it. You'll need to change the visibility property on the SidebarContainer that's exported from SidebarElements:
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
I prefer using the visibility property over setting display to block or none because if you want to you can animate or transition properties like opacity or transform. When toggling the display property your sidebar will just appear and disappear instantly.
Something else, you don't need to use an anonymous callback when calling the toggle from inside of Sidebar and Navbar:
<CloseIcon onClick={toggle}>X</CloseIcon>
<OpenIcon onClick={toggle}>open sidebar</OpenIcon>
I've updated the sandbox link you provided.
There are two problems with your code
You are calling the toggle like onClick={() => toggle} when you should be calling it like onClick={toggle} or onClick={() => toggle()}
Your "sidebar" is a overlapping your navbar (it is position:fixed with opacity:0 and covers the whole screen)
So fix 1 and then either move the sidebar elsewhere (as to not overlap) or change its display from none to block instead of the opacity.
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
I am trying to write a react component to render a menu, but I need to use just CSS for controlling the visibility, but I have a problem that I cannot able to solve.
I have set a hover on the element with the class menu, then it set the child called wrapSubMenu to visible but it is setting all menu's children. I pretend to Do it just on the first wrapSubMenu of the menu.
Playground here
They have the same class style, you cannot complete that on this way.
Try to do it with state toggling on hover, instead of css
here is the image of my codeI'm building a Twitter like app and i'm trying to build the 'Like' menu at the bottom of every tweet.
at the moment the 'Like' is a button and i want to change it's color once pressed.
the obvious problem is that all the other tweets 'likes' buttons are changing too..
i've tried everything i can using useState hooks and nothing worked..
any ideas?
What I would do is, I would store the liked info inside the item. So when you add like, you can change item.liked = true or item.liked = false
And once you do that you can style based on the item's liked field:
<button style={{backgroundColor: item.liked ? 'red' : ''}} ...
I designed a page and I have a Flatlist and I have pickers, slider and text input in this page. I also used Animated View in this page and I have an issue with KeyboardAvoidingView.
The design looks like this when the page is first rendered:First Render
When user click "Add" Icon the page looks like this:
Animation Triggered and View Flex Grow
And here is my main issue. When user click the TextInput for type something. This page looks like this:
TextInput Focused
You can also see my render code in this photo.JSX Code
I tried placing "keyboardavoidingview" in different places but my problem was not solved. How can I solve this?
P.S: The animation value based on "flex" property. The view has "0.5" flex value on first start and When the button is clicked, it takes the value "1".
wrap your code inside
<KeyboardAvoidingView>
</KeyboardAvoidingView>
And give it a style like this
flex: 1,
behavior="padding"
Kolay gelsin :)
New to React and MUI, and having a UX issue where when we have a popover (dropdown menu, or autoselect dropdown) we can still scroll the main body of the site. I see that its fixed in the new beta V1 for MUI, but using the current stable release, Ive been asked to see if we can hack it up to stop the scrolling - but I cant seem to target/catch anything when we have a popover appear.
Examples: Current MUI - http://www.material-ui.com/#/components/auto-complete
V1 Beta MUI - https://material-ui-next.com/demos/autocomplete/
So, if you were to input something in those examples and trigger the downdown/popover, youll see that in the current MUI, you can still scroll the
I was hoping someone may have had this issue and had a solution they'd like to share?
Thanks guys!
I had a similar problem and solve it using 'disablePortal' Autocomplete property:
You can take a look at 'disablePortal' definition in here:
https://material-ui.com/api/autocomplete/#props
disablePortal: Disable the portal behavior. The children stay within it's parent DOM hierarchy.
I also had to add some styles to get pop up get positioned relative to input component.
Here is some sort of example:
const useStyles = makeStyles({
popperDisablePortal: {
position: 'relative',
}
})
const classes = useStyles()
<Autocomplete
classes={classes}
disablePortal={true}
{...props}
/>
So you may have to:
set up disablePortal property
define associated popperDisablePortal style with 'relative' position
EDIT: actually this error should not happen as part of default MUI Autocomplete set up. In my case, the error was some conflicting CSS property that was generating this scroller bug. Not sure in your case, but to me it happens to be some overflow: auto property defined on page HTML tag (sometimes you can find it on body tag). Replace with overflow: 'visible' and scrolling error should be gone without even changing one line of autocomplete component definition.