1

I don't want the sidebar to always fill the entire vertical side, solved that by adjusting the height of the .sidebar.collapsed

However, when on a mobile device it still fills the entire side vertically and does not float over the map as on the desktop version. I assume this is not a bug but rather might be a simple fix in the @media section but I am not sure where to adjust.

I have not modified the sidebar code except for the above mention css edit, and a text decoration addition to the .sidebar-pane section.

Here is the desktop version. The sidebar floats nicely over the map image in background Here is the desktop version. The sidebar floats nicely over the map image in background

Then here is the mobile version. Even though the sidebar height is shortened, it still fills the entire vertical portion of the screen.

Then here is the mobile version. Even though the sidebar height is shortened, it still fills the entire vertical portion of the screen

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  z-index: 2000; }
  .sidebar.collapsed {
    width: 40px; 
    height: 120px;}
  @media (min-width: 768px) {
    .sidebar {
      top: 10px;
      bottom: 10px;
      transition: width 500ms; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
      width: 305px; } }
  @media (min-width: 992px) and (max-width: 1199px) {
    .sidebar {
      width: 390px; } }
  @media (min-width: 1200px) {
    .sidebar {
      width: 460px; } }

.sidebar-left {
  left: 0; }
  @media (min-width: 768px) {
    .sidebar-left {
      left: 10px; } }

.sidebar-right {
  right: 0; }
  @media (min-width: 768px) {
    .sidebar-right {
      right: 10px; } }

.sidebar-tabs {
  top: 0;
  bottom: 0;
  height: 100%;
  background-color: #fff; }
  .sidebar-left .sidebar-tabs {
    left: 0; }
  .sidebar-right .sidebar-tabs {
    right: 0; }
  .sidebar-tabs, .sidebar-tabs > ul {
    position: absolute;
    width: 40px;
    margin: 0;
    padding: 0;
    list-style-type: none; }
    .sidebar-tabs > li, .sidebar-tabs > ul > li {
      width: 100%;
      height: 40px;
      color: #333;
      font-size: 12pt;
      overflow: hidden;
      transition: all 80ms; }
      .sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
        color: #000;
        background-color: #eee; }
      .sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
        color: #fff;
        background-color: #0074d9; }
      .sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
        color: rgba(51, 51, 51, 0.4); }
        .sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
          background: transparent; }
        .sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
          cursor: default; }
      .sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
        display: block;
        width: 100%;
        height: 100%;
        line-height: 40px;
        color: inherit;
        text-decoration: none;
        text-align: center; 
        list-style-type: none; 
        padding-top: 10;
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 0;
        }
  .sidebar-tabs > ul + ul {
    bottom: 0; }

.sidebar-content {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  overflow-x: hidden;
  overflow-y: auto; 
  text-decoration: none; }
  .sidebar-left .sidebar-content {
    left: 40px;
    right: 0; 
    text-decoration: none; }
  .sidebar-right .sidebar-content {
    left: 0;
    right: 40px; }
  .sidebar.collapsed > .sidebar-content {
    overflow-y: hidden; }


.sidebar-pane {
  display: none;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 10px 20px; 
  font-family: Verdana, Geneva, Tahoma, sans-serif; }
  .sidebar-pane.active {
    display: block; 
    font-family: Verdana, Geneva, Tahoma, sans-serif; }
  @media (min-width: 768px) and (max-width: 991px) {
    .sidebar-pane {
      min-width: 265px; } }
  @media (min-width: 992px) and (max-width: 1199px) {
    .sidebar-pane {
      min-width: 350px; } }
  @media (min-width: 1200px) {
    .sidebar-pane {
      min-width: 420px; } }

        .sidebar-pane > li.disabled > a, .sidebar-pane > ul > li.disabled > a {
          text-decoration: none;
          color: inherit; 
          font-family: Verdana, Geneva, Tahoma, sans-serif; }
      .sidebar-pane > li > a, .sidebar-pane > ul > li > a {
        text-decoration: none;
        color: inherit;
        font-family: Verdana, Geneva, Tahoma, sans-serif; }

.sidebar-header {
  margin: -10px -20px 0;
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  font-size: 14.4pt;
  color: #fff;
  background-color: #0074d9; }
  .sidebar-right .sidebar-header {
    padding-left: 40px; }

.sidebar-close {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer; }
  .sidebar-left .sidebar-close {
    right: 0; }
  .sidebar-right .sidebar-close {
    left: 0; }

.sidebar-left ~ .sidebar-map {
  margin-left: 40px; }
  @media (min-width: 768px) {
    .sidebar-left ~ .sidebar-map {
      margin-left: 0; } }

.sidebar-right ~ .sidebar-map {
  margin-right: 40px; }
  @media (min-width: 768px) {
    .sidebar-right ~ .sidebar-map {
      margin-right: 0; } }

.sidebar {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
  .sidebar.leaflet-touch {
    box-shadow: none;
    border-right: 2px solid rgba(0, 0, 0, 0.2); }
  @media (min-width: 768px) {
    .sidebar {
      border-radius: 4px; }
      .sidebar.leaflet-touch {
        border: 2px solid rgba(0, 0, 0, 0.2); } }

@media (min-width: 768px) {
  .sidebar-left ~ .sidebar-map .leaflet-left {
    transition: left 500ms; } }

@media (min-width: 768px) and (max-width: 991px) {
  .sidebar-left ~ .sidebar-map .leaflet-left {
    left: 315px; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .sidebar-left ~ .sidebar-map .leaflet-left {
    left: 400px; } }

@media (min-width: 1200px) {
  .sidebar-left ~ .sidebar-map .leaflet-left {
    left: 470px; } }

@media (min-width: 768px) {
  .sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
    left: 50px; } }

@media (min-width: 768px) {
  .sidebar-right ~ .sidebar-map .leaflet-right {
    transition: right 500ms; } }

@media (min-width: 768px) and (max-width: 991px) {
  .sidebar-right ~ .sidebar-map .leaflet-right {
    right: 315px; } }

@media (min-width: 992px) and (max-width: 1199px) {
  .sidebar-right ~ .sidebar-map .leaflet-right {
    right: 400px; } }

@media (min-width: 1200px) {
  .sidebar-right ~ .sidebar-map .leaflet-right {
    right: 470px; } }

@media (min-width: 768px) {
  .sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
    right: 50px; } }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.