New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Three Issues - Extra Scrollbar, Overlapping Content and Visible Content in Chrome/Opera #70

Open
LDigital84 opened this Issue Jan 20, 2016 · 4 comments

Comments

Projects
None yet
4 participants
@LDigital84

LDigital84 commented Jan 20, 2016

I have a sidebar on a site that I am developing. Typically this sidebar contains content related to the site. Occasionally, I need to add additional content to the sidebar and this is where flip comes in.

In stead of having one very long sidebar, I have a back and front sidebar. It was working okay (using v1 of Flip) but then I upgraded my site from the Foundation Framework v5.5.3 to v6.1.1 and switched to a Flexbox layout. This is when I started having issues. I also made other changes so the issues I ran into may not be related to Foundation.

There are three issues I see.

  1. The "back" sidebar is long. Both sides of the sidebar show an extra scrollbar. Sometimes the scrollbar will disappear but after you flip it a couple times they will appear (this behavior depends upon the browser).

  2. When I flip it to the back, which is the long sidebar, it doesn't expand the container to fill the sidebar. Instead it just overlaps the content in the footer.

  3. The third issue I believe is related to Issue #53. When viewing the front, portions of the .back are showing through. I'm seeing icons (I am using Fort Awesome (previously Font Icons) which is by the same guy being Font Awesome) but also seeing text. In addition to that, I have progress bars that are showing through (progress bars are part of Foundation Framework v6.1.1 and if you do not see progress bars, cast a vote in Question of the Week to get the progress bars to show).

I've test these three issues in the following browsers:

  • Firefox v44
  • IE v11
  • Edge v25 (aka v13)
  • Chrome v47
  • Opera v34
  • Safari v7 (my Safari isn't up-to-date on my mac)
  • Safari v9 (on iPad)

Number 1 happens on all browsers excluding browsers on a mac or touch devices where scrollbars are not typically seen.

Number 2 happens in all browsers.

Number 3 happens in Chrome and Opera but the other browsers are okay.

Here is a link to see a test page that shows the problem. To flip the sidebar click the "More" button at the top of it.

Note: I'm using v1.0.19 of the JS. I did try v1.0.15 per #53 but that didn't make a difference.

@LDigital84

This comment has been minimized.

Show comment
Hide comment
@LDigital84

LDigital84 Jan 28, 2016

Anyone have any thoughts on this issue?

LDigital84 commented Jan 28, 2016

Anyone have any thoughts on this issue?

@dchatry

This comment has been minimized.

Show comment
Hide comment
@dchatry

dchatry Feb 8, 2016

For your 3rd issue, can you try putting a white background on your aside element ?

dchatry commented Feb 8, 2016

For your 3rd issue, can you try putting a white background on your aside element ?

@chapeti

This comment has been minimized.

Show comment
Hide comment
@chapeti

chapeti Jul 12, 2016

No news for bug 3 ?

chapeti commented Jul 12, 2016

No news for bug 3 ?

@jlrida

This comment has been minimized.

Show comment
Hide comment
@jlrida

jlrida Nov 4, 2016

For issue #3, try using:
$(".back").css('z-index', '0');

jlrida commented Nov 4, 2016

For issue #3, try using:
$(".back").css('z-index', '0');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment