Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Please reference http://imdarrien.com/#
When you open a modal, say profile, then close it again using esc, you can see that the content shifts left when the sidebar is re-added. How can I prevent that shift? I've tried adding overflow-y:visible to html but the shift still occurs.
When you click to open the popup, remodal-is-locked added to the html tag. The class removed after the fade-out animation was ended.
The problem is that when you close the popup, the html's overflow:hidden still exist because the class remodal-is-locked so in this situation both of the scrollbars (html or the popup) are showing, so the content is in specific position. Just after the animation wan ended you remove the class and html "get" his scollbar again.
P.S. The problem is in the remodal.min.js script so you have to edit this file. I try to point you to the specific place although the script was minified.
red - the close function.
green - the callback function, after the animation was ended.
blue - the function which remove the class remodal-is-locked from the html.
The solution
Remove the class when you start the fade-out animation. (The purple arrow)
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 days ago.
Improve this question
I need some help with achieving hover effect with black textbox using html and css as below google search example. Pls advise
enter image description here
I have tried using title tag for mouse over effect but i like to achieve the same look as google search page
this little hover effect can be made in js I think
look after modal in javascript.
Basically. you hard code this textbox in HTML then you add a class on it with a display:none to hide it.
Then with javascript you add / remove this class when the user click in the input ( focus mode). when the class is added, then display:none is active so the modal is hidden. when the class is removed ( when the user focus the input form) the modal appear.
At least this is how i would do it.
https://www.w3schools.com/howto/howto_css_modals.asp should help
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
In React code, I have constant-sized divs with dynamic data rendered in them. Often data is too long and overflows. Is there some way to detect when content is overflowing so that I can conditionally apply a tooltip on the content?
You can check for scrollWidth and scrollHeight if those are higher than clientWidth and clientHeight.
In React.js you should place that in useLayoutEffect to give a browser chance to paint that tooltip automatically without jumping effect.
compare the offsetWidth and the width of your div
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When viewing my website (http://elsealabs.com/), it seems as if the content is animating inwards, even though I have no animations for such an event specified. How do I make this animation stop?
It is especially noticeable if you refresh the page and watch the download button or the navigation menu.
The Stylus code is here: https://gist.github.com/Connorelsea/a8d62c9dc7ac31069fc9
My Jade layout is here: https://gist.github.com/Connorelsea/b614e3754a1854625f1b
My Node.JS server code is here: https://gist.github.com/Connorelsea/198b7c2a1bace65d03c9
If anyone could even point me in the right direction to figuring out why this is happening, that would be great.
I believe it's the padding or margin transitioning at the page load. It is a bit weird, but the solution is to only apply a transition to the attributes you wish to have transition (and not "all" as you are here).
For the links, it would be something like
a {
transition: font-size .2s, font-weight .2s;
}
On a sidenote, I suggest making the line-height a fixed height (in px) to make it less jumpy.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have built a website in HTML/CSS, however at some point along building it I have gained a slight sidway scroll to it, in other words the instead of the website perfectly fitting the screen there are thin bars of white each side that can be accessed through scrolling left or right on the screen. I am wondering how I could find out the source of this issue?
http://whynotapp.co.uk/tryitout.html
This occurs on both safari and chrome
This could happen because of a left/right margin on a 100% width element/div. It could also happen if you have positioned an element somewhere that causes it to go off the screen.
In general, if nothing is missing from the screen that needs to be on the screen, you can just use :
body {
overflow-x: hidden;
}
which will hide anything that over extends the x access from the screen.
Inspect element in chrome allows you to see a box of the location and size of an element, by selecting it in html. The element causing the problem should be larger than the containing element, which can help you find it.
F12 to enter dev mode or right click your element.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I've got a strange Problem, but first some description:
First there is a TreeTable - View. In each row, there is a drop-down menu in 1 column.
The drop-down is realized via HTML tag. And here is my problem:
If I click with a normal click on the expand button nothing happens.
If I click with an right click, than the menu will expand. Afterwards it works with a normal left click, too.
So I think the reason for this problem are the event listeners of the TreeTable. So I already added an if-condition and added some logging. The click is always logged, but the drop-down is still react like I've described above.
I thought i could call the expand() Method, but as far as I know, there isn't any way to toggle the expand a drop-down, without using jQuery. (NOTE: Refactoring the size isn't a good solution)
So I'm at the end of my knowledge, maybe one of you knows an solution. Thank You.
I've got an solution: at my listener I added this: target.focus(); target.click(); (target is the -Element) Now it works fine. Might I'm adding an if-condition...