Nav vs. Div in the Skin Stylesheet

This forum is for all Flare issues related to styles, stylesheets and XML.

Nav vs. Div in the Skin Stylesheet

Postby lcarver on Fri Feb 14, 2020 7:50 am

The latest Flare update changed some things on the back end that had the side effect of screwing up a bunch of my skin styling. I use a post-build command to import my own skin stylesheet. I have fixed most of the problems, but my side navigation pane still has a problem with scrolling out of sight when the page is scrolled.

Tech support helped me track the remaining problem to a change implemented on the Flare end (this occurs during building and I was told there is no way to override it):

Code: Select all
<div class="main-section">
<div class="row outer-row sidenav-layout">
                            <nav class="sidenav-wrapper">
                                <div class="sidenav-container">
...
</div>
</nav>
</div>
</div>


The sidenav-wrapper <nav> class used to be a <div> class!

I have not been able to find anything useful online about why navs behave differently than divs, but for some reason this has really messed up my navigation pane.

Fixes that haven't worked:
- If I use position: fixed in the .sidenav-wrapper class in my skin stylesheet, I lose the ability to scroll in the nav pane and the bottom content gets hidden.
- Someone at tech support suggested adding the property "height: 90%;" and for some reason this does fix the scrolling issue, but it messes up the scaling and if someone zooms the browser in to 125-150%, the bottom content still gets hidden.

Halp? :)
lcarver
Propeller Head
 
Posts: 16
Joined: Mon May 21, 2018 8:20 am

Re: Nav vs. Div in the Skin Stylesheet

Postby Dave Lee on Mon Feb 17, 2020 12:25 am

lcarver wrote:but my side navigation pane still has a problem with scrolling out of sight when the page is scrolled.


What's the problem that you're trying to fix?

By default, the side navigation pane will scroll separately to the topic body.
Dave Lee
Master Propellus Maximus
 
Posts: 5824
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Nav vs. Div in the Skin Stylesheet

Postby lcarver on Tue Feb 18, 2020 1:53 pm

Hi Dave,

Thanks for your response! :) It used to work for me - but since the <div> was replaced with a <nav> on the back end in Flare, it no longer scrolls separately from the page by default (with my imported skin stylesheet). The navigation pane scrolls right out of sight when you scroll the page.

The fix they gave me to fix the problem was to change the height of sidenav-wrapper to 90%. But that causes this problem - the bottom of the navigation pane content begins to get lost off the bottom edge of the browser; it won't scroll further.

scrollproblem.png


Another problem is that a blank space for the side nav pane is now showing up on my homepage (see below), even though I have the master page set with

Code: Select all
.sidenav-wrapper{
            display:none;
         }


sidenav-home.png


I am puzzling over why <div> and <nav> behave so differently; I think I will have to revert to a previous version of Flare if I can't figure this out, but I don't want to be stuck with that version forever.

Lexi
You do not have the required permissions to view the files attached to this post.
lcarver
Propeller Head
 
Posts: 16
Joined: Mon May 21, 2018 8:20 am

Re: Nav vs. Div in the Skin Stylesheet

Postby Psider on Tue Feb 18, 2020 8:52 pm

It's likely that some other style you have defined is interferring with the new nav code.

If you can't see what's causing it using the developer tools, you could try making a copy of your imported stylesheet, remove all the styles and add them back in one by one until you find the one causing the issue.
Psider
Propellus Maximus
 
Posts: 646
Joined: Wed Jul 06, 2011 1:32 am

Re: Nav vs. Div in the Skin Stylesheet

Postby Dave Lee on Wed Feb 19, 2020 12:28 am

lcarver wrote:it no longer scrolls separately from the page by default (with my imported skin stylesheet). The navigation pane scrolls right out of sight when you scroll the page.



Yep, but by default the navigation page and topic will scroll separately.

So I'd guess that it's something in your skin stylesheet that is causing the problem.
Dave Lee
Master Propellus Maximus
 
Posts: 5824
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Nav vs. Div in the Skin Stylesheet

Postby lcarver on Wed Feb 19, 2020 7:26 am

Hmm, OK, I will try stripping everything out and adding them back into my stylesheet one by one. Thanks!
lcarver
Propeller Head
 
Posts: 16
Joined: Mon May 21, 2018 8:20 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 4 guests