Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Commit

Permalink
- fixes #1069
Browse files Browse the repository at this point in the history 
- Solution needed for selectlist [data-resize]=auto when `display: none`
- added catch if width returns as 0 and displays selectlist as normal.
- different test examples http://jsbin.com/beyogiqizi/
  • Loading branch information
@BenjaminNeilDavis
BenjaminNeilDavis committed Feb 11, 2015
1 parent 762f106 commit bf9cf2d
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 1 deletion.
4 changes: 4 additions & 0 deletions js/selectlist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,10 @@
}
});

if (width <= 1) {
return;
}

this.$button.css('width', width);
this.$dropdownMenu.css('width', width);

Expand Down
5 changes: 4 additions & 1 deletion less/misc.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,15 @@ input, textarea {
left:-9999px;
}

.button-sizer, .selectlist-sizer {
.button-sizer, .selectlist-sizer{
display: inline-block;
position: absolute;
visibility: hidden;
top: 0;
float: left;
.selectlist {
display: block !important;
}
.dropdown-menu {
display: block;
min-width: inherit;
Expand Down
69 changes: 69 additions & 0 deletions test/markup/selectlist-markup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,72 @@
</ul>
<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div class="btn-group selectlist" id="MySelectlist7">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">All</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
<li class="divider"></li>
<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text">
</div>

<div class="btn-group selectlist" data-resize="auto" data-initialize="selectlist" id="MySelectlist8">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">All</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
<li class="divider"></li>
<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text">
</div>


<div class="btn-group selectlist hidden" data-resize="auto" data-initialize="selectlist" id="MySelectlist9">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">All</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
<li class="divider"></li>
<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text">
</div>

<button type="button" class="btn btn-default" id="btnShowSelect4">show</button>

0 comments on commit bf9cf2d

Please sign in to comment.