Skip to content

Commit 12916b0

Browse files
mdomdo
committed
Fix up display of dropdown submenu examples on responsive views
1 parent e31c7fb commit 12916b0

File tree

3 files changed

+47
-13
lines changed

3 files changed

+47
-13
lines changed

‎docs/assets/css/docs.css

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -687,6 +687,21 @@ form.bs-docs-example {
687687
margin: 20px;
688688
}
689689

690+
/* Dropdowns */
691+
.bs-docs-example-submenus {
692+
min-height: 180px;
693+
}
694+
.bs-docs-example-submenus > .pull-left + .pull-left {
695+
margin-left: 20px;
696+
}
697+
.bs-docs-example-submenus .dropup > .dropdown-menu,
698+
.bs-docs-example-submenus .dropdown > .dropdown-menu {
699+
display: block;
700+
position: static;
701+
margin-bottom: 5px;
702+
*width: 180px;
703+
}
704+
690705

691706

692707
/* Responsive docs
@@ -1013,7 +1028,26 @@ form.bs-docs-example {
10131028
word-break: break-all;
10141029
}
10151030

1016-
/* Modal example */
1031+
/* Examples: dropdowns */
1032+
.bs-docs-example-submenus > .pull-left {
1033+
float: none;
1034+
clear: both;
1035+
}
1036+
.bs-docs-example-submenus > .pull-left,
1037+
.bs-docs-example-submenus > .pull-left + .pull-left {
1038+
margin-left: 0;
1039+
}
1040+
.bs-docs-example-submenus p {
1041+
margin-bottom: 0;
1042+
}
1043+
.bs-docs-example-submenus .dropup > .dropdown-menu,
1044+
.bs-docs-example-submenus .dropdown > .dropdown-menu {
1045+
margin-bottom: 10px;
1046+
float: none;
1047+
max-width: 180px;
1048+
}
1049+
1050+
/* Examples: modal */
10171051
.modal-example .modal {
10181052
position: relative;
10191053
top: auto;

‎docs/components.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -165,12 +165,12 @@ <h3>Aligning the menus</h3>
165165

166166
<h3>Sub menus on dropdowns</h3>
167167
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
168-
<div class="bs-docs-example" style="min-height: 180px;">
168+
<div class="bs-docs-example bs-docs-example-submenus">
169169

170170
<div class="pull-left">
171171
<p class="muted">Default</p>
172172
<div class="dropdown clearfix">
173-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
173+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
174174
<li><a tabindex="-1" href="#">Action</a></li>
175175
<li><a tabindex="-1" href="#">Another action</a></li>
176176
<li><a tabindex="-1" href="#">Something else here</a></li>
@@ -189,10 +189,10 @@ <h3>Sub menus on dropdowns</h3>
189189
</div>
190190
</div>
191191

192-
<div class="pull-left" style="margin-left: 20px;">
192+
<div class="pull-left">
193193
<p class="muted">Dropup</p>
194194
<div class="dropup">
195-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
195+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
196196
<li><a tabindex="-1" href="#">Action</a></li>
197197
<li><a tabindex="-1" href="#">Another action</a></li>
198198
<li><a tabindex="-1" href="#">Something else here</a></li>
@@ -211,10 +211,10 @@ <h3>Sub menus on dropdowns</h3>
211211
</div>
212212
</div>
213213

214-
<div class="pull-left" style="margin-left: 20px;">
214+
<div class="pull-left">
215215
<p class="muted">Left submenu</p>
216216
<div class="dropdown">
217-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
217+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
218218
<li><a tabindex="-1" href="#">Action</a></li>
219219
<li><a tabindex="-1" href="#">Another action</a></li>
220220
<li><a tabindex="-1" href="#">Something else here</a></li>

‎docs/templates/pages/components.mustache

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,12 @@
9494

9595
<h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
9696
<p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
97-
<div class="bs-docs-example" style="min-height: 180px;">
97+
<div class="bs-docs-example bs-docs-example-submenus">
9898

9999
<div class="pull-left">
100100
<p class="muted">Default</p>
101101
<div class="dropdown clearfix">
102-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
102+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
103103
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
104104
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
105105
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@@ -118,10 +118,10 @@
118118
</div>
119119
</div>{{! /.pull-left }}
120120

121-
<div class="pull-left" style="margin-left: 20px;">
121+
<div class="pull-left">
122122
<p class="muted">Dropup</p>
123123
<div class="dropup">
124-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
124+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
125125
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
126126
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
127127
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@@ -140,10 +140,10 @@
140140
</div>
141141
</div>{{! /.pull-left }}
142142

143-
<div class="pull-left" style="margin-left: 20px;">
143+
<div class="pull-left">
144144
<p class="muted">Left submenu</p>
145145
<div class="dropdown">
146-
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
146+
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
147147
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
148148
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
149149
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>

0 commit comments

Comments
 (0)