So I'm working on implementing a Material-UI modal, and ran into the issue where the appearance and disappearance of the scrollbar shifts the modal every single time it closes. I can fix this with the "mui-fixed" class, but it adds extra padding on the right side of the modal that looks bad.
I'm just generally curious if there's a better way to fix this problem with the scrollbar disappearing and reappearing, or if there's a way to accomplish this using "mui-fixed" without the padding on the right.
Setting the padding to 0 simply makes it act like the "mui-fixed" class wasn't included in the first place, which causes the scrollbar shift issue again.
This is the padding that doesn't look right on the side of my modal window when "mui-fixed" is added.
Here's the modal WITHOUT the "mui-fixed" class.
Here's the modal WITH the "mui-fixed" class.
Update-- I figured it out. The reason why this was occurring was because I had a custom scrollbar that was offsetting the modal. I just removed my ::webkit-scrollbar and ::webkit-scrollbar-thumb classes and everything works great now.
Related
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
I'm using react-big-calendar with react-sidebar and if the sidebar opens, all the area is covered by overlay but some elements are visible on the top.
What can be the problem?
P.S: I've also given the z-index to both but nothing worked for me!
react-big-calendar with react-sidebar
I don't know the particulars of react-sidebar, but it's definitely a z-index issue. Does react-sidebar provide a Portal option for it's overlay (I'm not seeing one)? RBC is dynamically writing out the events to the page, and using 'auto' z-index, so if your overlay is defined first (like the sidebar is on the left, and calendar on the right), then that's what's happening.
In bootstrap uib-collapse class animation behaviour hapeens only for vertical div.
But I need same animation/motion behaviour for table columns to show or hide upon click on icon.
For rightnow using ng-show and ng-hide but that doesnt seems animation behaviour not look good.
How can I achieve same behaviour for table colum wise NOT row
uib-collapse has a horizontal option and all you have to do is to add an additional attribute called 'horizontal' for the panel div as follows.
<div uib-collapse="isCollapsed" horizontal></div>
There is an issue recalling this problem and there is a workaround for it but as it's mentioned it's not recommended to use that.
Doing some further investigation, this appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. It seems that even when using vanilla Bootstrap JS, one has to hack around it too.
Here is a workaround that works - I am going to close this issue as not a fixable bug unfortunately. Thankfully, one can work around this, as my Plunker shows.
I'm trying to animate a button so that if it is clicked, a picture will appear, but when it is clicked again, the picture will disappear- I want this to continue to happen indefinitely- I feel like this can easily be written with a macro, but I want to avoid unnecessary over-complicating of things. I tried to add in click animations but it will only appear and then disappear
Instead of using animations, you can toggle the transparency of the image between 0 (totally transparent) and 1 (totally solid) when click happens to achieve disappearing and appearing.
I've wasted too much time on this and am begging, begging, I tell you, the stackoverflow community for help!
I'm a new jqGrid user, and have my grid working as I want it to, but at the moment, cannot get a row to highlight in IE 7 as the mouse is hovered over it. Our shop is currently running IE7, so changing browsers/versions is not a possibility. Hover works great in Firefox, does not work in IE7.
I have googled endlessly for "jqgrid ie7 hover", "jquery ie7 hover", and any iteration of "ie7" and "hover", and "css" and all that.
I have tried so many variations of DOCTYPE declarations it ain't funny. I've tried reverse engineering the http://www.trirand.com/blog/jqgrid/jqgrid.html demo pages until my fingers are aching. Yes, the hover works on the demo pages. No it ain't working on my own page. I have tried manually passing in the ui hover CSS classes directly with different attributes and the !important flag just to see if I get anything. Nothing.
Now here is what does happen when I hover over a jqGrid row with IE7: The bottom and right borders of the table cells will change color, but the background color does not. So, I know the hover highlighting is working for the cell borders, but not for the cells or row itself.
As a diagnostic aid, I slapped in a javascript alert() to bang when I hovered over the table. It works at the table level, but does not ever fire if I set it to fire if I hover over a row or cell. I used the IE Developer Toolbar DOM parser to verify I'm calling it right. I'm wondering if jqGrid takes over that functionality, though.
Anyhow, folks, the short version is: Why can't I get row highlighting to work in IE7?
Help me Obi Wan Kenobi, you're my only hope!
I'll answer my own question. The problem was a conflict with a separate .css file. My page uses the 960 Grid System for layout control. One of the items used as part of the grid system is a "reset.css" which was conflicting with the jqGrid hover display in my app. I commented out the call to reset.css and the problem went away. Fwiw, I did not see any other adverse affects to the grid system by leaving out reset.css.