[CSS] Make long navtree sub-menus scroll (sort of)

[Shrike]

^{I'm aware this isn't a template mod, there just isn't a place for small-yet-powerful CSS tweaks like this.}

Warning: You should only use this code if you know what you're doing, not being careful may result in you breaking your navtree

Do you find that you've got a board with tons of sub-boards which makes your navtree look like THIS? If you've really got hundreds of sub-boards, you should probably further categorise them, but what if that isn't enough? What if you've got 40 or so that won't fit anyway? It's possible to make these specific sub-menus in the navtree have a scroll bar so that they can be easily used. It'll also still let the code that decides whether to put the sub-menu above/below the navtree work properly.

Important: This code will only work if there are no sub-sub-boards in the board you want to apply this to. See the quoted post at the end for a workaround.

First of all, find the board IDs of those with lots of sub-boards in. You can do this by going to the parent board (in the example from the screenshot above, the "Jedi/Republic" one) from the navtree and looking at the URL: http://example.proboards.com/board/91/board-name

Once you've got that, simply add it in where we've got the number (91) in this example code:

.nav-tree-board-91 ul {max-height: 400px; overflow-y: auto;}
.nav-tree-board-91 ul .ui-menu a {overflow: visible;}

If you have multiple boards that need taming just add the same selectors again, replacing the board ID for each. You can change the max-height value if you want, but 400px should work fine.

The end result? Usable navtrees!


Can't see sub-sub-boards?

Feb 11, 2013 6:02:25 GMT -8 Shrike said:

For now, the only ways to work around this are to either scroll sideways if your mouse wheel can do this OR, once this large sub-menu is opened, click on the vertical scroll bar to give it focus and then you should be able to use the arrow keys. I'm afraid this is the only workaround, so it makes it a case of deciding on the lesser of two evils.

[Maiden]

Works great except one little thing. Certainly Nicer than waiting for a bug fix on long nav items going up. Very easy as well, just copied and pasted it to the bottom of the style sheets.

solariaweyr.proboards.com/

Out of Character > Characters > Beautiful scrolling list of subboards.

However it prevents you viewing any sub-boards of those boards... - I can't scroll right because I can't get to the sidewards scroll bar while remaining hovered over the board with the subboards. (Not crucial for me as not many of those boards are likely to have sub-boards and if they do it'll likely be for inactive/dead/moved away characters but thought you might like to know)

[Shrike]

Feb 11, 2013 5:03:53 GMT -8 Maiden said:

Works great except one little thing. Certainly Nicer than waiting for a bug fix on long nav items going up. Very easy as well, just copied and pasted it to the bottom of the style sheets.

solariaweyr.proboards.com/

Out of Character > Characters > Beautiful scrolling list of subboards.

However it prevents you viewing any sub-boards of those boards... - I can't scroll right because I can't get to the sidewards scroll bar while remaining hovered over the board with the subboards. (Not crucial for me as not many of those boards are likely to have sub-boards and if they do it'll likely be for inactive/dead/moved away characters but thought you might like to know)

Ah, I didn't have any sub-sub-boards for this. I'll have a look and see what needs fixing for this. Thanks for letting me know.

[Shrike]

^{sorry for double post, wanted to get a tag in there}

Maiden

Yeah, I did something similar to this on an old test forum of mine and ran into similar problems. I think I got around that by having extra divs inside and doing something with table display layouts. That'd be difficult to do here without completely rewritting the whole navtree code, which isn't really an option. It might be possible to do something with the help of jQuery that would absolutely position the sub-menus having moved them outside the the parent board's ul, and that might end up being the best fix, but it'd take a fair bit of work especially as there is some code to determine whether the navtree should open above or below the navtree "bar". At some point in the future, I might have a go at this because I find that the nav-tree doesn't play nice with some touch-based events in some browsers (I use Boat on my Nexus 10 rather than Chrome partly because the latter just can't cope with the navtree).

Essentially, this is the intended behaviour of the CSS used for making the sub-menu scroll, but it also causes this problem if we have another sub-menu inside this adjusted sub-menu.

For now, the only ways to work around this are to either scroll sideways if your mouse wheel can do this OR, once this large sub-menu is opened, click on the vertical scroll bar to give it focus and then you should be able to use the arrow keys. I'm afraid this is the only workaround, so it makes it a case of deciding on the lesser of two evils.

[Maiden]

Thanks, as I said, I'm not very worried about it. Most of those boards won't have subboards and the ones that do they should be mostly for retired information.

Not being able to get to the first layer of subboards was a real pain though so thanks for the mod! We refer to the character boards a lot so the nav-tree had loads of potential for making that easy

[Shrike]

Feb 11, 2013 6:06:04 GMT -8 Maiden said:

Thanks, as I said, I'm not very worried about it. Most of those boards won't have subboards and the ones that do they should be mostly for retired information.

Not being able to get to the first layer of subboards was a real pain though so thanks for the mod! We refer to the character boards a lot so the nav-tree had loads of potential for making that easy

I realised that, in the end, the benefit of seeing all the sub-boards would sort of outweigh the problem of not being able to easily get to a few sub-sub-boards. Like I said, it is still possible to get to them, it's just a bit fiddly to scroll sideways in there