Skip to content

aside height calculation error #5

@stevenkissack

Description

@stevenkissack

I've just starting using the react version (also trying to change more of it to reactstrap components)

Anyway, I've ran into a strange bug that I don't believe is technically your fault as the calculation seems correct but it is consistent across all browsers which is strange.. the aside tab content when bigger than the container cuts off the bottom of the content

Offending element: .aside-menu-fixed .aside-menu .tab-content

The see the issue: https://genesisui.com/demo/root/bootstrap4-ajax/#main.html
Go to the message tab in the aside and you'll see the bottom message being cut off.

Calculation related rambling:
You use a similar method to size the left nav (VH 100% minus the the topbar nav height) and this works perfectly, so my guess is the extra tabs heading div height calculation is the culprit (padding plus icon font size) This actually looks to be correct but once you use it in practice all browsers seem to overshoot it by 1 VH unit.

Temp fix:
I have a tight deadline so I've simply overridden it and reduced the VH by 1 - All browsers work flawlessly now but this isn't something I'd want to push upstream.

You seem to have much more experience with this so any help would be amazing!

Thanks a bunch for your work, it's a really nice and flexible codebase to work with!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions