CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designmedia-queries
steven
steven

Reputation: 191

Push content away from sidebar when re-sizing screen

I want whenever my screen-size reaches 1512 x 473 for the content inside content.php to not overlap onto the left sidebar. As this makes the sidebar links unreadable. Would really appreciate the help guys :)

content.php

<div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Dashboard

                        </h1>

                    </div>
                </div>
                <!-- /.row -->


                       <div class="row">

                            <div class="col-xs-3 col-xs-3">

                        <div class="panel panel-default">
                              <div class="panel-heading text-center">Panel heading without title</div>
                              <div class="panel-body text-center">
                                Panel content
                              </div>
                            </div>


                            </div>

                            <div class="col-xs-3 col-xs-3">

                             <div class="panel panel-default">
                              <div class="panel-heading text-center">Appointments</div>
                              <div class="panel-body text-center">
                                Panel content
                              </div>
                            </div>


                            </div>

                            <div class="col-xs-3 col-xs-3">

                             <div class="panel panel-default">
                              <div class="panel-heading text-center">Panel heading without title</div>
                              <div class="panel-body text-center">
                                Panel content
                              </div>
                            </div>


                            </div>


                            <div class="col-xs-3 col-xs-3">

                             <div class="panel panel-default text-center">
                              <div class="panel-heading">Panel heading without title</div>
                              <div class="panel-body text-center">
                                Panel content
                              </div>
                            </div>


                            </div>


                       </div>


            </div>
            <!-- /.container-fluid -->

sidebar.php

<aside class="sidebar">

    <ul class="menu" id="menu">

    <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>


    <li><a href="doctors.php"><i class="fa fa-users"></i> Doctors</a></li>
    <li><a href="nurses.php"><i class="fa fa-users"></i> Nurses</a></li>

    <li><a href="patients.php"><i class="fa fa-users"></i> Patients</a></li>
    <li><a href="#"><i class="fa fa-address-book-o"></i> Appointments</a></li>


    </ul>

</aside>

CSS:

.sidebar

    {

        float:left;
        position: absolute;
        top:0px;
        left:0px;
        background-color: #E0E0E0;
        width:200px;
        height: 100%;

    }

Upvotes: 0

Views: 1483

Answers (2)

penguoir
penguoir

Reputation: 155

First of all, most screen-sizes I used (not only 1512 x 473) had overlapping text on the sidebar. So I'm not sure that I have enough info to help you.

I took a bootstrap example and changed the content to what you asked for. I also included a toggle button for the sidebar.

Here's the HTML:

<html lang="en">

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          <a href="#">
            Sidebar Title
          </a>
        </li>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
          <a href="#">Doctors</a>
        </li>
        <li>
          <a href="#">Nurses</a>
        </li>
        <li>
          <a href="#">Patients</a>
        </li>
        <li>
          <a href="#">Appointments</a>
        </li>
      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div class="container-fluid">
      <!-- Page Heading -->
      <div class="row">
        <div class="col-lg-12">
          <h1 class="page-header">Dashboard</h1>
        </div>
      </div>
      <!-- /.row -->
      <div class="row">
        <div class="col-xs-3 col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading text-center">Panel heading without title</div>
            <div class="panel-body text-center">
              Panel content
            </div>
          </div>
        </div>

        <div class="col-xs-3 col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading text-center">Appointments</div>
            <div class="panel-body text-center">
              Panel content
            </div>
          </div>
        </div>

        <div class="col-xs-3 col-xs-3">
          <div class="panel panel-default">
            <div class="panel-heading text-center">Panel heading without title</div>
            <div class="panel-body text-center">
              Panel content
            </div>
          </div>
        </div>


        <div class="col-xs-3 col-xs-3">
          <div class="panel panel-default text-center">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body text-center">
              Panel content
            </div>
          </div>
        </div>
      </div>

      <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

    </div>
  </div>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

Here's the CSS: 

body {
  overflow-x: hidden;
}


/* Toggle Styles */

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 250px;
}

#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #eee;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}

#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}


/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #eee;
}

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

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

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #666;
  background: rgba(0, 0, 0, 0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
  color: #777;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #000;
  background: none;
}


/* When the screen size is small, the sidebar will automatically collapse. */

@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}

And the Javascript (for the collapsible sidebar)

$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
});

I hope this helps your project!

Codepen: http://codepen.io/penguoir/pen/YNMoyW

Upvotes: 1

Antonio Canillas
Antonio Canillas

Reputation: 102

You can use @media query just add div tag in the sidebar.php and put the content.php to the div tag and display:none the div. when it reach the size 1512

cheer's

Upvotes: 0

Related Questions