I'm currently trying to implement a feed of posts, where clicking on a post would open a modal. I'm using angular as a frontend framework and decided to use the bootstrap modal, since it works well with angular. Problem is, that the modal forces the body to scroll to top when showing. This is ofcourse not ideal when scrolling through a feed.
The css line below is the culprit. Why this causes the problem to occur, i do not know, but i kind of need the scrollbar to be always showing. Loaading of dynamic content would otherwise make my layout jump around.
html {
overflow-y: scroll;
}
Removing this line is fine right now, but i need to find a fix soon, as the layout would jump horizontally when loading new content, if the scrollbar is not always visible and then suddenly appearing. Does anyone have any clue as to why this causes the problem, and how i can possibly fix it?
Sounds like the modal is the problem. Make sure your modal or its outer-most container has position: fixed, as it sounds like it is disrupting the flow of the <body> element.
Related
Help me. I need to make a button that does not move along with scrolling the page
It can be a button fixed on the page and
It can be a sticky button
it can be a popup button
are you using position: sticky and are you giving it a top or bottom value? Without top or bottom it won't just work.
Have you checked if you browser does support position: sticky? That could be the cause as well. If your browser doesn't support it you might need to implement some javascript fallback
I have put together very recently an article on medium that you can check here if you want to know the insights of it and some examples that might figure out what's wrong
I'm creating my web-page by using fullpageJs https://alvarotrigo.com/fullPage/ plugin, and trying to make accordion FAQ page.
Basically the accordion refers to https://bootsnipp.com/snippets/QXdqR
The problem is when accordion exceeds the page height, the scrollbar doesn't work properly. (I'm activating "scrollOverflow" option)
Here is my current jQuery:
$(document).ready(function() {
$('.accordion').find('.accordion-toggle').click(function() {
$(this).next().slideToggle('600');
$(".accordion-content").not($(this).next()).slideUp('600');
});
$('.accordion-toggle').on('click', function() {
$.fn.fullpage.reBuild();
$(this).toggleClass('active').siblings().removeClass('active');
});
});
I just added $.fn.fullpage.reBuild();, trying to solve the problem.
However, I'm still stucking with three problems below;
It works only when the scrollbar is originally shown in the screen. (When "Q" content exceeds the height of screen)
Whole accordion move to unpredicted position after opening & closing answer.
(This happens when scrollbar originally isn’t displayed on the screen and then exceeds the height when the accordion opens. (This is hard to explain in words, and I hope the explanation makes sense…))
It seems adding $.fn.fullpage.reBuild(); makes the page slow to load. (especially on mobile). Is there any way to solve this?
By the way, I could get an ideal result when I resized browser each time after opening & closing answers.
...That’s it.
I would appreciate it very much if someone taught me any suggestions.
Try this:
$('#fullpage').fullpage({
scrollOverflow: true
});
Ionic Version: 1.x
Platform: all
I have an ionic app which uses an ionic popover. However, when the popover is active (open), I can no longer interact with things in the background, for example scroll down my list of items. I have tried looking for existing answers for this question, but did not see the question being asked.
The popover itself does not have to be bound to any active element on the page, since it currently has position:fixed and will always appear in the same position.
So basically the question is, is there a way to prevent the popover from preventing me interacting with everything in the background?
I found this codepen someone put up:
https://codepen.io/ionic/pen/GpCst
This may do the trick?
.popover-backdrop {
display:none;
}
I have found an answer, however, not sure if there is a better way to do this, perhaps an option that turns interacting with the background on and off, but for now the answer seems to be as follows:
Ensure the .popover-backdrop class is the same size and position (height and top margin in my case) as the actual fixed popover element. The default is height 100%.
Ensure that for the .popover-open class (applied to the body) you disable pointer-events: none;
Keep in mind that this will change the behaviour where if you click outside of the popover that it will close it by default. So in ionic, I will have to make sure that on the event where I leave the view that closes the popup if active.
Please take a look at this site: removed per request
When you click Learn More, the Fancybox lightbox window pops up and looks fine, but when you click the right arrow on the lightbox, a scrollbar shows up for just an instant (it reaches all the way to the top of the doctor's picture). This is happening on Chrome and Safari.
I can't figure out what code to write to not show that scrollbar. The content will never be long enough to need a scrollbar (except on mobile, etc). Another option would be to just have the scrollbar stop at the top of the content container (not go all the way up to the top of the dr's picture). Please help if you can; it would be much appreciated!! I'm a newb to jQuery/Javascript. Thank you!!
You can try to solve this with CSS. Set overflow: hidden on the container div. This will hide any content that overflows the container, so use with care.
I am having a hard time looking for a modal box that has a similar functionality as the one on Pinterest.
I am currently using simple-modal (jQuery) but the problems are the height is not dynamic (putting height: auto has some problems) and the modal box's position is fixed at the center. Hence, if the content is long, it will just have a scrollbar on its own (inside the modal box) instead of being scrollable using the browser's main scrollbar. When I use the main browser's scrollbar, it's scrolling the content behind the modal (which is the actual web page) which is not what I intend to happen.
Do you have any suggestions on what to use?
If you right click on a object and open it as a new tab/window, you will then see what Pinterest is overlaying on the main page.
That said, you might achieve the same effect by expanding a full viewport iframe with semi-transparent background to see the underlying page.
To be sure, I've not come across any lightbox clones similar to Pinterest's custom jQuery version hidden somewhere in it's .js file.
Status Update:
If your willing to create your own method, I've outlined a process seen in my SO Answer here