dojo-bootstrap button styling

TracySchloss — Fri, 10 Dec 2021 22:10:32 GMT

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>

Re: dojo-bootstrap button styling

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:10:34 GMT

Tracy,

Change you css to this: (the important part is the overflow visible on the panel-group and then remove the relative positioning you did).

<style type="text/css">
  .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;
  }

  .panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
    overflow: visible;
  }
</style>

Re: dojo-bootstrap button styling

TracySchloss — Tue, 26 May 2015 14:01:26 GMT

That was it, thanks. I always struggle with css.

topic Re: dojo-bootstrap button styling in ArcGIS JavaScript Maps SDK Questions

dojo-bootstrap button styling

Re: dojo-bootstrap button styling

Re: dojo-bootstrap button styling