I'm attempting to expand and transition a button into a modal that's 60% of the height and width of the window when it is clicked. Here's a CodePen of my work so far: http://codepen.io/anon/pen/WbNONa. The problem I'm having is that the position property can't be transitioned. Both the button and the modal (which is underneath the button) are absolutely positioned inside the button wrapper to make both elements look like one element. When the button is clicked, the modal should expand to a fixed position on top of the overlay.
The issue is that the positioning immediately changes from absolute to fixed, so the modal just looks like it's contracting from the full window size. If you delete the position: fixed property on the #btn-content.active class, you can see what I'm essentially trying to do. How can I emulate the transition of the position property? If that's not possible, how can I have the modal transition to a height and width that are relative to the size of the window? Thank you kindly for your time.
Related
I'm trying to create a modal that has contents of dynamic height that needs to be scrollable if the height of the content goes beyond a certain value but also needs to have certain elements overflow it. To be specific, there are dropdowns within the modal that I don't want to expand the height of the modal but instead overflow the modal's boundaries if they happen to be at the bottom of the modal.
Setting overflow: visible on the modal content achieves this if the modal height is small but then if the height of the modal content increases beyond the height of the viewport, it's obviously unscrollable because of the aforementioned overflow: visible.
I've thought about checking the height of the modal with JS to decide whether it should be overflow: auto or overflow: visible, however that seems like a wonky solution and it means that if the modal is already near viewport height and I set the overflow property to auto to enable scrolling, I still lose the effect I'm looking for, which is for open dropdowns to go outside the modal's boundaries.
Is there a more elegant solution to this?
I have a react app that has a sidebar. This sidebar vertically long and has ul > li elements. I wrap this element with React Scrollbar extension.
Problem is, Scrollbars sets overflow to hidden. My sidebar is responsive and when its on mobile view, if user hover any icon, it expands to show the text right to it. I also illustrated this on demo.
Due to scrollbar adds overflow: hidden, the text near to icon is not visible on hover. I am able to make it work if i set overflow: visible on scrollbar wrapper. However, this time, scrollbars stop working.
How can i keep scrollbars vertically and expand to the right when hover over icons and show the text.
Please see the demo: https://react-cgpzcq.stackblitz.io
Editor here: https://stackblitz.com/edit/react-cgpzcq
I can also change props of scrollbar so any modification to the scrollbar element is also possible. Any idea?
I'm trying to create a popup which uses window scrollbars not the div ones. Something like what is on http://pinterest.com. How to achieve this effect? All my tries are unsuccessful, scrollbars appear on div. Window scollbars scroll the body content.
When you open popup window, you should remember current window scrollLeft/scrollTop positions somewhere, then apply overflow:hidden, height/width:100% to html and body, which will prevent page scrolling.
Create overlay div with position:absolute, z-index:9999, left/top:0, height/width:100%, overflow:auto, and append it to body - it will be scrollable container of your popup.
Inside of this container create div with position:absolute and left/top values, calculated in js to center it if necessary.
After you close popup, restore overflow, height/width styles for html/body, and apply scrollLeft/scrollTop values that were saved before opening popup.
I've a tricky problem. So I have two fixed element with space in between under those two elements I have a relative positioned element, everything is ok so far. Now when I scroll the relative positioned element will scroll and appear in between the two fixed elements and on top of the first one, here is the jsfiddle to make it clearer. I'd like the relative positioned content not to appear when scroll, like if it was a box scrolling with an overflow hidden.
The goal is to do a kind of box scrolling but with a window scrolling.
I'd like a css solution but I'm also opened to any js solution.
What about this?
http://jsbin.com/uSEfUMA/2/edit
fixed has a background
you can also add padding to body if you don't want to set a background to fixed
Could make a zindexed div with a background set to the same color as the page bg, put that over the relative positioned div and under the absolutes so when the relative div scrolls to that point of the page it appears to dissapear how I believe you want it to, or just use overflow hidden and absolute positioning to lock it into place and clip the content.
I would like to know how can I change attributes of a div onClick.
To make myself clear, I want to know how can I make a div that looks like the one on the Mozilla Developer Network site.
When you click the "Mozilla" button, the banner slides down to reveal behind it a hidden div.
I know this hiding thing is based on the z-index of the overlapping slide and the absolute position.
My question is how can I make the div slide position (e.g. top: 0px to top: 150px) and stay there when removing finger from mouse.
Thank you folks.