I am using foundation framework. When I scroll down to the page in firefox and open the Reveal result in gray overlay only here i need to scroll to the top by myself to see the Reveal. I added this CSS to the model.
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
This is working fine but the slideDown and slideUp not working as normal instead it will just fadeIn and fadeOut in both Firefox and Chrome. What is the solution for this issue to get the normal behavior of the Reval as in Chrome.
Take a look here, at Ken Smith's Post
By adding onclick="javascript: location.hash='#page'; location.hash='';" to the button/link that opens modal it will automatically scroll for you.
Just replace #page with your modal id.
Unfortunately this is only a temporary workaround. Hope it helps though!
comment out your CSS...
#id-of-the-reveal-element {
position: fixed;
top: 100px !important;
}
whenever foundation reveal js tries to position its modal box on the center of the screen or the place you trigger the modal box, your CSS forces it to display 100px from top of the page with fixed position.
else you could post your code (structure) of the triggering part and the reveal modal box so that I could get a clear idea.
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
I'm getting a flicker in the first 3 of 9 main navigation items in my CSS menus (there are no submenus), which occurs in IE, Safari, Firefox and Chrome, but ONLY on the home page.
Specifically, the first menu item "About" flickers the most, while "Admissions" and "Academics" both flicker, but not as overtly.
My thoughts are that something is conflicting with the menus on the home page, specifically something unique to the home page, such as the Google search I've embedded in the upper navigation (and tried to style as unobtrusively as possible), or the jQuery slideshow.
I've tried several solutions suggested here for flickering in webkit, but none have solved the problem.
It looks like it's caused by your dropdown curtains being too wide. So hovering on the nav item shows them, which then immediately causes the mouse is positioned over them and not the nav item... causing them to be hidden again. Hence the flickering (I think!).
This doesn't happen on the nav items to the right because they're short enough so they don't cover the nav links when 'hidden'.
See image below of the width.
Changing the css to have a larger top value of -800px like the following may help:
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -800px;
}
I have created a transition effect for a menu on a web site. When I hover over the element it doesn't show the content that I want to see. Instead of that, scroll bar appears. This means the transition effect is working on this menu but the page doesn't go up to show the menu content.
My menu is at the bottom of the page. Please see My code below. Thanks
.change_height {
overflow:hidden;
height: 20px;
transition: height 3s;
}
.change_height:hover
{ height: 198px; }
CSS alone, even with animations will not cause the browser to automatically scroll. You'll need to use JavaScript that's triggered on hover.
From a usability point of view I wonder why you'd want the menu to appear in that position? If the element that triggers it is always at the bottom of the page why not have it animate upwards?
Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox.
I'm unsure if I'm doing something wrong, or if I could be doing something better to fix the issue.
I have a Plunker illustrating the issue here: http://plnkr.co/edit/fhI7M7ev75AGYzesf4GB?p=preview
To reproduce, the following must be done (as the layout of Plunker seems to fix the issue):
Run the Plunk (in Chrome)
Breakout the preview into a new window
Reduce the height to show just the colored box
Click on the "Click Me" button and then scroll to witness issue
If you reload the scrolling list page the top banner will be correctly fixed to the top.
The CSS for the top banner is simple:
.fplcd-top-banner {
background-color: #7c7c7c;
background: linear-gradient(to bottom, #7c7c7c, #666666);
height: 50.15745px;
left: 0;
margin-bottom: 7.16535px;
padding: 7.16535px;
position: fixed;
top: 0;
width: 320px;
z-index: 10; }
If you edit the plunk and remove the animation (at the bottom of the CSS file, comment above them) styles, the issue no longer persists.
Is this a known issue, or am I doing something just odd enough that would knock Chrome out of whack? In either case, is there a tweak that can be done to fix this up?