Bootstrap Dropdown button width issue

Question

I am using a sidebar to have a list of URL links or buttons if you will but I also need some dropdown buttons/lists in there as well.

I am having an issue of having it look consistently alike and also fill the width of the container also as front end isn't my strongest suite am struggling to get it to look how I want.

You can see that the list within the sidebar is the full width across.....but the button isn't so I need to get it the whole way across and look consistent with the list or alternatively somehow throw a drop down menu on top of the list if required, I have tried to maniputlate it via using btn-block and width 100% to no joy

I need to have a separate buttons for the drop down button seen in example.

jQuery(function($) {
  $(document).ready(function() {
    $('[data-toggle=offcanvas]').click(function() {
      if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
        $('.list-group-item').attr('tabindex', '-1');
      } else {
        $('.list-group-item').attr('tabindex', '');
      }
      $('.row-offcanvas').toggleClass('active');

    });
  });

});

body {
  padding-top: 50px;
}
/*
 * Style tweaks
 * --------------------------------------------------
 */

html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  height: 100%;
}
body {
  padding-top: 70px;
}
footer {
  padding: 30px 0;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  background-color: transparent;
  color: #999999;
}
.head {
  background: #668B8B;
  color: #000000;
}
.side-contain {
  margin-top: 5px;
  border: 2px solid #668B8B;
  border-radius: 10px;
}
/*
 * Off Canvas
 * --------------------------------------------------
 * Greater thav 768px shows the menu by default and also flips the semantics
 * The issue is to show menu for large screens and to hide for small
 * Also need to do something clever to turn off the tabs for when the navigation is hidden
 * Otherwise keyboard users cannot find the focus point
 * (For now I will ignore that for mobile users and also not worry about
 * screen re-sizing popping the menu out.)
 */

@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 25%;
  }
  .row-offcanvas-left {
    left: 25%;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -25%;
    /* 3 columns */
    background-color: rgb(255, 255, 255);
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -25%;
    /* 3 columns */
    background-color: rgb(255, 255, 255);
  }
  .row-offcanvas-right.active {
    right: 0;
    /* 3 columns */
  }
  .row-offcanvas-left.active {
    left: 0;
    /* 3 columns */
  }
  .row-offcanvas-right.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas .content {
    width: 75%;
    /* 9 columns */
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas.active .content {
    width: 100%;
    /* 12 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 25%;
    /* 3 columns */
  }
}
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 0;
  }
  .row-offcanvas-left {
    left: 0;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -50%;
    /* 6 columns */
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -50%;
    /* 6 columns */
  }
  .row-offcanvas-right.active {
    right: 50%;
    /* 6 columns */
  }
  .row-offcanvas-left.active {
    left: 50%;
    /* 6 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    /* 6 columns */
  }
}





  
  
  Test
  
  


  
    
      
        Test
      
      
          
            
          
      
    
  
  
    
    
      
        
          
            My Account
          
          
            
            
            
              HTML
              
              CSS
              
              JavaScript
              
            
          
          - Placeholder
          - Placeholder
          - Placeholder
          - Placeholder
        
      
      
      
        
          Test
          Hallo

I have attached a JS fiddle also: https://jsfiddle.net/z2a7jr68/1/

Neelesh · Accepted Answer

Add following style to your drop down buttons.

Bootstrap Dropdown button width issue

Answers (2)

Related Questions