html – Asp.net Core MVC Render Body Problem after Implementing Responsive Side Bar

After implementing the sidebar its fridge my other page and didn’t able to scroll the page in Asp.net Core MVC. I think the problem is coming from the _layout.cshtml file. as it has a container which render my other page. Please help me to solve this problem.

Here is My _Layout.cshtm File. The header is the side bar.

<header>
        <div class="sidebar">
            <div class="logo_content">
                <div class="logo">
                    <i class="bx bxl-c-plus-plus"></i>
                    <div class="logo_name">dgInfoSys</div>
                </div>
                <i class="bx bx-menu" id="btn"></i>
            </div>
            <ul class="nav_list">
                <li>
                    <i class="bx bx-search-alt"></i>
                    <input class="text" placeholder="Search...">
                    <span class="tooltip">Search</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-grid-alt"></i>
                        <span class="links_name">Dashboard</span>
                    </a>
                    <span class="tooltip">Dashboard</span>
                </li>
                <li>


                    <a href="#">
                        <i class="bx bx-user"></i>
                        <span class="links_name">User</span>
                        <i class="bx bxs-chevron-down htmlcss-arrow arrow  "></i>
                    </a>

                    <span class="tooltip">User</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bxs-user-badge"></i>
                        <span class="links_name">Super Admin</span>
                    </a>
                    <span class="tooltip">Super Admin</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-line-chart"></i>
                        <span class="links_name">Analytics</span>
                    </a>
                    <span class="tooltip">Analytics</span>
                </li>
                <li>
                    <a asp-controller="BTBTable" asp-action="Index">
                        <i class="bx bxs-report"></i>
                        <span class="links_name">Files</span>
                    </a>
                    <span class="tooltip">Files</span>
                </li>
                <li>
                    <a href="#">
                        <i class="bx bx-cog"></i>
                        <span class="links_name">Setting</span>
                    </a>
                    <span class="tooltip">Setting</span>
                </li>
            </ul>
            <div class="profile_content">
                <div class="profile">
                    <div class="profile_details">
                        @*<img src="" alt="" />*@
                        <div class="name_job">
                            <div class="name">Masum Rayhan</div>
                            <div class="job">Developer</div>
                        </div>
                    </div>
                    <i class="bx bx-log-out" id="log_out"></i>
                </div>
            </div>
        </div>
    </header>
    <div id="main">
         <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 
         </span>
    </div>
    <div class="container">
         <main role="main" class="pb-3">
               @RenderBody()
         </main>
    </div>

And side bar css is given below:

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 78px;
    /*width: 240px;*/
    background: #11101d;
    padding: 6px 14px;
    transition: all 0.5s ease;
}

    .sidebar.active {
        width: 240px;
    }

.sidebar .logo_content .logo {
    color: #fff;
    display: flex;
    height: 50px;
    width: 100%;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}

.sidebar.active .logo_content .logo {
    opacity: 1;
    pointer-events: none;
}

.logo_content .logo i {
    font-size: 28px;
    margin-right: 5px;
}

.logo_content .logo .logo_name {
    font-size: 20px;
    font-weight: 400;
}

.sidebar #btn {
    position: absolute;
    color: #fff;
    left: 50%;
    top: 6px;
    font-size: 20px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    transform: translateX(-50%);
}

.sidebar.active #btn {
    left: 90%;
}

.sidebar ul {
    margin-top: 20px;
}

    .sidebar ul li {
        position: relative;
        height: 50px;
        width: 100%;
        margin: 0 5px;
        list-style: none;
        line-height: 50px;
    }

        .sidebar ul li .tooltip {
            position: absolute;
            left: 122px;
            height: 35px;
            width: 122px;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 6px;
            line-height: 35px;
            text-align: center;
            background: #fff;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            transition: 0s;
            opacity: 0;
            pointer-events: none;
        }

.sidebar.active ul li .tooltip {
    display: none;
}

.sidebar ul li:hover .tooltip {
    transition: all 0.5s ease;
    opacity: 1;
    top: 50%
}

.sidebar ul li input {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 12px;
    outline: none;
    border: none;
    background: #1d1b31;
    padding-left: 50px;
    font-size: 18px;
    color: #fff;
}

.sidebar ul li .bx-search {
    position: absolute;
    z-index: 99;
    color: #fff;
    font-size: 22px;
    transition: all 0.5s ease;
}

    .sidebar ul li .bx-search:hover {
        background: #fff;
        color: #1d1b31;
    }

.sidebar ul li a {
    color: #fff;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.4s ease;
    border-radius: 12px;
    white-space: nowrap;
}

    .sidebar ul li a:hover {
        color: #11101d;
        background: #fff;
    }

    .sidebar ul li a i {
        height: 50px;
        min-width: 50px;
        border-radius: 12px;
        line-height: 50px;
        text-align: center;
    }

.sidebar .links_name {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease;
}

.sidebar.active .links_name {
    opacity: 1;
    pointer-events: auto;
}

.sidebar .profile_content {
    position: absolute;
    color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
}

    .sidebar .profile_content .profile {
        position: relative;
        padding: 10px 6px;
        height: 60px;
        background: none;
        transition: all 0.4s ease;
    }

.sidebar.active .profile_content .profile {
    background: #1d1b31;
}

.profile_content .profile .profile_details {
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.sidebar.active .profile .profile_details {
    opacity: 1;
    pointer-events: auto;
}

.profile .profile_details img {
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 12px;
}

.profile .profile_details .name_job {
    margin-left: 10px;
}

.profile .profile_details .name {
    font-size: 15px;
    font-weight: 400;
}

.profile .profile_details .job {
    font-size: 12px;
}

.profile #log_out {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
    background: #1d1b31;
}

.sidebar.active .profile #log_out {
    left: 80%
}

.sidebar.active .profile #log_out {
    background: none;
}

.home_content {
    position: absolute;
    height: 100%;
    width: calc(100% -78px);
    left: 78px;
    transition: all 0.5s ease;
}

    .home_content .text {
        font-size: 25px;
        font-weight: 500;
        color: #1d1b31;
        margin: 12px;
    }

.sidebar.active ~ .home_content {
    width: calc(100% -240px);
    left: 240px;
}

Leave a Comment