locked
MVC Navbar obscures content RRS feed

  • Question

  • User323983933 posted

    Second try: Grrr.

    I am using the standard MVC layout.  The Navbar is fixed to the top and there is a space on every page that makes the tops of the pages not go under the navbar.

    HOWEVER: I am trying to link to an anchor tag in the page, and the anchored table row is coming up under the navbar.  

    What I'd like is to have the navbar occupy its own space and the content occupy a separate space.   I never want my content going under the navbar.  

    ALSO: do not suggest offsetting the <a name> tags as that will cause the last record to be off-page if I link to that.

    Tuesday, July 7, 2020 4:43 PM

Answers

  • User323983933 posted

    Found a workable solution:

    Created this style:

    div.scrollable-content{
        display:block;
        overflow:auto;
        height:80vh;
        width:99vw;
        margin-top:50px;
    }

    I had been trying to create a "height: 90%" div, but that only works in another div with a fixed height.  These new vh and vw (viewport height and viewport width) params work like % except with the 100% being the viewport rather than the parent div.

    I added a margin-top to make sure the div has a nice blank spot under the nav bar.

    Then I wrapped my content in it.  This is in the _layout page

        <div class="scrollable-content">
            <div class="container body-content">
                @RenderBody()
                <hr />
            </div>
        </div>

    I have tested this on my PC but not on mobile yet, but I'm gonna call this a workable solution.  I only wish I could integrate this into the default template from now on forever so I don't have to solve the same problem again tongue-out.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 7, 2020 5:30 PM

All replies

  • User-474980206 posted

    unless you want the navbar to scroll off the page, you will need to adjust the position on scroll. just use a little javascript to ensure visible. check if its x pixels from the top and y pixels from the bottom. 

    the browser default scroll is to the viewport. just replace with you own.

    Tuesday, July 7, 2020 4:55 PM
  • User323983933 posted

    Found a workable solution:

    Created this style:

    div.scrollable-content{
        display:block;
        overflow:auto;
        height:80vh;
        width:99vw;
        margin-top:50px;
    }

    I had been trying to create a "height: 90%" div, but that only works in another div with a fixed height.  These new vh and vw (viewport height and viewport width) params work like % except with the 100% being the viewport rather than the parent div.

    I added a margin-top to make sure the div has a nice blank spot under the nav bar.

    Then I wrapped my content in it.  This is in the _layout page

        <div class="scrollable-content">
            <div class="container body-content">
                @RenderBody()
                <hr />
            </div>
        </div>

    I have tested this on my PC but not on mobile yet, but I'm gonna call this a workable solution.  I only wish I could integrate this into the default template from now on forever so I don't have to solve the same problem again tongue-out.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 7, 2020 5:30 PM