I know I'm really down in the weeds here for using just dojo and bootstrap, but maybe someone can help me out. I want to be able to use some dropdown buttons within a collapsible panel. I've been using the panel and it works OK. I've put the buttons in a straight div and that's OK, but when I combine, the items that should list when you click the button are either a) cropped, so they're nearly hidden or b) if you set style as position: relative, it shoves all the rest of the buttons off to the side, which looks very ugly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown button test</title>
<link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css">
<!-- <link rel="stylesheet" type="text/css" href="https://community.esri.com//esri.github.io/bootstrap-map-js/dist/css/bootstrapmap.min.css"> -->
</head>
<style type="text/css">
.dropdown-menu {
position: relative;
}
.nav-pills > li > a {
position: relative;
background-color: #CBDDEB;
color: #000000;
padding: 3px;
margin: 1px 10px 1px 10px;
}
.nav .open > a:focus {
background-color: #96bad8;
}
</style>
<script type="text/javascript">
window.dojoConfig = {
async: true,
packages: [{
name: 'dojo-bootstrap',
location: '//rawgit.com/xsokev/Dojo-Bootstrap/master'
}]
};
</script>
<script type="text/javascript" src="//js.arcgis.com/3.12compact">
</script>
<script type="text/javascript">
require(['dojo-bootstrap/Collapse', 'dojo-bootstrap/Dropdown']);
</script>
<body class="bs-docs-example">
<div id="sidebar">
<div class="panel-group" id="my-accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#my-accordion" href="#one">Find a Provider</a></h4>
</div>
<div id="one" class="panel-collapse collapse in">
<div class="panel-body">
Search by one of these types:
<div>
<ul class="nav nav-pills">
<!-- <li class="active">
<a href="#">Regular link</a>
</li>-->
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Facility<b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li>
<a tabindex="-1" href="#">Hospital</a>
</li>
<li>
<a tabindex="-1" href="#">Clinic</a>
</li>
<li>
<a tabindex="-1" href="#">Dentist</a>
</li>
<li>
<a tabindex="-1" href="#">Mental Health</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Service<b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li>
<a tabindex="-1" href="#">Home Care</a>
</li>
<li>
<a tabindex="-1" href="#">Medical Equipment</a>
</li>
<li>
<a tabindex="-1" href="#">Pharmacy</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Condition<b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li>
<a tabindex="-1" href="#">Diabetes</a>
</li>
<li>
<a tabindex="-1" href="#">Hearing</a>
</li>
<li>
<a tabindex="-1" href="#">Dental</a>
</li>
<li>
<a tabindex="-1" href="#">Eye/Vision</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
