Search code examples
jqueryasp.net-corerazorbootstrap-4

Top menu bar and left hand side menu remain static, ASP.NET Core

I am using ASP.NET Core 6, jQuery and Bootstrap. I have a screen that has a left hand side menu, I wish the menu and top menu remain static and only the input details can scroll vertically.

See this screenshot:

enter image description here

My _layout markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/FNSD.styles.css" asp-append-version="true" />
</head>

<body stylew="min-height:100vh;">
    <header>
        <div class="container-fluid p-3">
            <div class="row">
                <div class="col-md-12 d-flex align-items-left">
                    <img src="/branding/FN-Graphic_color.svg" alt="Logo" class="img-fluid" style="max-width: 80px; max-height: 80px;">
                    <a class="navbar-brand  text-dark" asp-area="" asp-controller="Home" asp-action="Index">
                        <h1 class="m-0" style="padding-left:16pt;padding-top:10px;">Forensic Network Data System</h1>
                    </a>
                </div>
            </div>
        </div>

        <nav class="navbar navbar-dark navbar-expand-lg bg-body-tertiary mb-3" data-bs-theme="dark" style="background-color:#002d72;">

            <div class="container-fluid">
                
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                    <partial name="_LoginPartial" />
                </div>
            </div>
        </nav>

    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
  </div>

  <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - FNSD - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
  </footer>
  <script src="~/lib/jquery/dist/jquery.min.js"></script>
  <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="~/js/site.js" asp-append-version="true"></script>
  @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

My patient navigation, the left hand side menu:

<div class="col-md-3">
    <div id="designationReports">
        <ul class="nav nav-pills flex-column">
            <li class="nav-item"><a class="nav-link" id="Designated" asp-controller="Patient" asp-action="Edit">Patient Demographic Information</a></li>
            <li class="nav-item"><a class="nav-link" id="DesignationRenewalDue" asp-controller="Personal" asp-action="History">Personal History</a></li>
        </ul>
    </div>
</div>

This is my patient layout file:

@{
    Layout = "_Layout";
}

<h4>Patient</h4>
<hr />
<div>
    <div class="row">
        <div class="col-md-3">
            @await Html.PartialAsync("_PatientNav")
        </div>

        @RenderBody()
    </div>
</div>

An extract of my patient.cshtml:

@{
    Layout = "_LayoutPatient";
}

@{
    await Html.RenderPartialAsync("_Patient");
}

And my patient details file (_Patient.cshtml):

<div class="card-body">
    <fieldset class="form-group">
        <div class="form-row">
            <div class="col-md-7">
                <div class="row">
                    <label class="control-label col-md-3">Location:</label>

                    <div class="col-md-8 mb-2">
                        <select id="hlthbrdId" style=" width: 363px; height: 37px;"></select>
                        <span class="text-danger"></span>
                    </div>
                </div>

                <div class="row">
                    <label class="control-label col-md-3">Forename:</label>

                    <div class="col-md-8 mb-2">
                        <input class="form-control" maxlength="100" />
                        <span class="text-danger"></span>
                    </div>
                </div>

                <div class="row">
                    <label class="control-label col-md-3">Surname:</label>

                    <div class="col-md-8 mb-2">
                        <input class="form-control" maxlength="100" />
                        <span class="text-danger"></span>
                    </div>
                </div>

                <div class="row">
                    <label class="control-label col-md-3">Date Of Birth:</label>

                    <div class="col-md-3 mb-2">
                        <input type="date" class="form-control" />
                        <span class="text-danger"></span>
                    </div>
                </div>

                <div class="row">
                    <label class="control-label col-md-3">Previous Postcode:</label>

                    <div class="col-md-8 mb-1">
                        <select style=" width: 363px; height: 37px;"></select>
                        <span class="text-danger"></span>
                    </div>
                </div>
                <div class="row">
                    <label class="control-label col-md-3">Specify:</label>

                    <div class="col-md-8 mb-2">
                        <input type="text" class="form-control" />
                        <span class="text-danger"></span>
                    </div>
                </div>

                <div class="row">
                    <label class="control-label col-md-3">Gender:</label>

                    <div class="col-md-8 mb-2">
                        <select style=" width: 363px; height: 37px;"></select>
                        <span class="text-danger"></span>
                    </div>
                </div>
            </div>
    </fieldset>
</div>

I tried something like the below for the left hand menu, didn't work -

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
            <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">

Didn't really work.

Any help would be greatly appreciated.

Solution

  • You can use the Flexbox layout on the .row element, and then use the overflow-y attribute on the input details container, like this:

     <div>
    <h4>Patient</h4>
    <hr />
    <div class=".row d-flex">
        <div class="col-md-2" >
            @await Html.PartialAsync("_PatientNav")
        </div>
        <div class="col-md-8" id="FixH">
            @RenderBody()
        </div>
    </div>
</div>


   <style>
    #FixH {
        overflow-y: auto;
        max-height: 400px;
        width: 80%;
    }
   </style>

    enter image description here