Studento919 Studento919 - 6 months ago 42
Javascript Question

Bootstrap Dropdown button width issue

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 */
}
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form action="/logoutadmin" class="navbar-form navbar-right">
<button class="btn btn-success" type="submit" id="user" onsubmit="return false">Log Out</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="side-contain">
<div class="panel-heading head" role="tab" id="headingOne">
<h2 class="panel-title">My Account</h2>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a>
</li>
<li><a href="#">CSS</a>
</li>
<li><a href="#">JavaScript</a>
</li>
</ul>
</div>
<a href="#" class="list-group-item btn">- Placeholder</a>
<a href="#" class="list-group-item btn">- Placeholder</a>
<a href="#" class="list-group-item btn">- Placeholder</a>
<a href="#" class="list-group-item btn">- Placeholder</a>
</div>
</div>
<!--/span-->
<div class="col-xs-12 col-sm-10 content">
<div>
<h1 class="main-head">Test</h1>
<p class="lead">Hallo
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</body>
</html>





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

Answer

Add following style to your drop down buttons.

<div class="btn-group" style="width:100%">
        <button class="btn btn-default" type="button" style="width:80%">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:20%;">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" style="width:100%">
          <li><a href="#">HTML</a>
          </li>
          <li><a href="#">CSS</a>
          </li>
   <li><a href="#">JavaScript</a>
 </li>