Blank area to the left of side navigation bar

Question

I am trying to make a sidebar for one on my views in ASP.NET.

Im close to finished, but I get a blank space on the left of my sidebar, which results in making the width more than 100% wide (notice scrollbar)

This is when the scrollbar is opened:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="~/Content/profilePageSheet.css" rel="stylesheet" />
</head>
<body>

<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Job experience</a></li>
            <li><a href="#">Profile details</a></li>
        </ul>
    </div>

    <!-- Page content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#" class="btn btn-success" id="menu-toggle">Menu</a>
                    <h1>Profile</h1>
                    <p>
                        Lorem ipsum dolor... 
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Menu toggle script -->
<script>
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("menuDisplayed");
    });
</script>

CSS

#wrapper {
    float:left;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Sidebar */
#sidebar-wrapper {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #2C3E50;
    border: 2px solid red;
    opacity: 0.9;
    transition: .5s ease-out;
}

/* Always take up entire screen */
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}


/* Change with of sidebar from 0 to 250px */
.menuDisplayed #sidebar-wrapper {
    width: 250px;
}

/* Since we added left padding, we need to shrink the width by 250px */
.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}


/* Sidebar styling - the entire ul list */
.sidebar-nav {
    padding: 0;
    list-style: none;
}

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #ddd;
    }

    .sidebar-nav li a:hover {
        background: #afaeae;
    }

I have also tried adding this to my stylesheet:

#wrapper {
    float:left;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

Seems like a style issue to me. Since im working in Visual Studio ASP.NET, do you know if theres an automatically generated CSS-file that could interfere?

Answer 1

Though it doesn't completely answer your question, this bit

#page-content-wrapper {
    width: 100%;
    margin-right: 20%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}

May cause you some issues. You're setting the width of the element to 100%, then adding a padding of 15px to each side (since padding sits inside the block element, it's added to the width).

Also, your borders will also add to the block element width, further adding to the horizontal scroll.

Blank area to the left of side navigation bar

Question

1 answers

solution1
1 2018-04-26 14:58:27

Blank area to the left of side navigation bar

Question

1 answers

solution1 1 2018-04-26 14:58:27

solution1
1 2018-04-26 14:58:27