Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit aca36f7

Browse files
SparksxSparksx
committed
Fix: Search box not shown to search when data is an empty array with select2 theme
1 parent d1ce1cf commit aca36f7

8 files changed

+12060
-139
lines changed

‎dist/select.css

+167-75
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*!
22
* ui-select
33
* http://github.com/angular-ui/ui-select
4-
* Version: 0.19.7 - 2017-04-15T14:28:36.790Z
4+
* Version: 0.19.8 - 2018-01-11T13:06:09.355Z
55
* License: MIT
66
*/
77

@@ -21,11 +21,10 @@
2121
overflow: hidden !important;
2222
position: absolute !important;
2323
outline: 0 !important;
24-
left: 0px !important;
25-
top: 0px !important;
24+
left: 0 !important;
25+
top: 0 !important;
2626
}
2727

28-
2928
.ui-select-choices-row:hover {
3029
background-color: #f5f5f5;
3130
}
@@ -34,68 +33,84 @@
3433

3534
/* Mark invalid Select2 */
3635
.ng-dirty.ng-invalid > a.select2-choice {
37-
border-color: #D44950;
36+
border-color: #D44950;
3837
}
3938

4039
.select2-result-single {
4140
padding-left: 0;
4241
}
4342

44-
.select2-locked > .select2-search-choice-close{
45-
display:none;
43+
.select2-locked > .select2-search-choice-close {
44+
display: none;
4645
}
4746

48-
.select-locked > .ui-select-match-close{
49-
display:none;
47+
.select-locked > .ui-select-match-close {
48+
display: none;
5049
}
5150

5251
body > .select2-container.open {
5352
z-index: 9999; /* The z-index Select2 applies to the select2-drop */
5453
}
5554

55+
.select2 .ui-select-footer,
56+
.select2 .ui-select-header {
57+
padding: 4px 10px;
58+
}
59+
60+
.select2 .ui-select-footer {
61+
border-top: 1px solid #dfe5eb;
62+
}
63+
64+
.select2 .ui-select-header {
65+
border-bottom: 1px solid #dfe5eb;
66+
}
67+
5668
/* Handle up direction Select2 */
5769
.ui-select-container[theme="select2"].direction-up .ui-select-match,
5870
.ui-select-container.select2.direction-up .ui-select-match {
59-
border-radius: 4px; /* FIXME hardcoded value :-/ */
60-
border-top-left-radius: 0;
61-
border-top-right-radius: 0;
71+
border-radius: 4px; /* FIXME hardcoded value :-/ */
72+
border-top-left-radius: 0;
73+
border-top-right-radius: 0;
6274
}
75+
6376
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
6477
.ui-select-container.select2.direction-up .ui-select-dropdown {
65-
border-radius: 4px; /* FIXME hardcoded value :-/ */
66-
border-bottom-left-radius: 0;
67-
border-bottom-right-radius: 0;
78+
border-radius: 4px; /* FIXME hardcoded value :-/ */
79+
border-bottom-left-radius: 0;
80+
border-bottom-right-radius: 0;
6881

69-
border-top-width: 1px; /* FIXME hardcoded value :-/ */
70-
border-top-style: solid;
82+
border-top-width: 1px; /* FIXME hardcoded value :-/ */
83+
border-top-style: solid;
7184

72-
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
85+
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
7386

74-
margin-top: -4px; /* FIXME hardcoded value :-/ */
87+
margin-top: -4px; /* FIXME hardcoded value :-/ */
7588
}
89+
7690
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
7791
.ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
78-
margin-top: 4px; /* FIXME hardcoded value :-/ */
92+
margin-top: 4px; /* FIXME hardcoded value :-/ */
7993
}
94+
8095
.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
8196
.ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
82-
border-bottom-color: #5897fb;
97+
border-bottom-color: #5897fb;
8398
}
8499

85100
.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
86-
.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
87-
opacity: 0;
88-
height: 0;
89-
min-height: 0;
90-
padding: 0;
91-
margin: 0;
92-
border:0;
101+
.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input {
102+
opacity: 0;
103+
height: 0;
104+
min-height: 0;
105+
padding: 0;
106+
margin: 0;
107+
border: 0;
93108
}
94109

95110
/* Selectize theme */
96111

97112
/* Helper class to show styles when focus */
98-
.selectize-input.selectize-focus{
113+
.selectize-input.selectize-focus {
99114
border-color: #007FBB !important;
100115
}
101116

@@ -114,25 +129,47 @@ body > .select2-container.open {
114129
width: 100%;
115130
}
116131

132+
.selectize-dropdown .ui-select-footer,
133+
.selectize-dropdown .ui-select-header {
134+
padding: 5px 8px;
135+
}
136+
137+
.selectize-dropdown .ui-select-header {
138+
border-bottom: 1px solid #b8b8b8;
139+
}
140+
141+
.selectize-dropdown .ui-select-footer {
142+
border-top: 1px solid #b8b8b8;
143+
}
144+
117145
/* Mark invalid Selectize */
118146
.ng-dirty.ng-invalid > div.selectize-input {
119-
border-color: #D44950;
147+
border-color: #D44950;
120148
}
121149

122150
/* Handle up direction Selectize */
123151
.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
124-
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
125-
margin-top: -2px; /* FIXME hardcoded value :-/ */
152+
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
153+
margin-top: -2px; /* FIXME hardcoded value :-/ */
154+
}
155+
156+
.ui-select-container[theme="selectize"] input.ui-select-search-hidden {
157+
opacity: 0;
158+
height: 0;
159+
min-height: 0;
160+
padding: 0;
161+
margin: 0;
162+
border: 0;
163+
width: 0;
126164
}
127165

128-
.ui-select-container[theme="selectize"] input.ui-select-search-hidden{
129-
opacity: 0;
130-
height: 0;
131-
min-height: 0;
132-
padding: 0;
133-
margin: 0;
134-
border:0;
135-
width: 0;
166+
.ui-select-container[theme="selectize"] .ui-select-header-group-selectable:hover {
167+
background-color: #f5f5f5;
168+
}
169+
170+
.ui-select-container[theme="selectize"] .ui-select-header-group-selectable {
171+
cursor: pointer;
172+
padding-left: 15px;
136173
}
137174

138175
/* Bootstrap theme */
@@ -171,22 +208,23 @@ body > .select2-container.open {
171208
border-top-right-radius: 0;
172209
border-bottom-right-radius: 0;
173210
}
211+
174212
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
175213
border-radius: 4px !important; /* FIXME hardcoded value :-/ */
176214
border-top-right-radius: 0 !important;
177215
border-bottom-right-radius: 0 !important;
178216
}
179217

180-
.ui-select-bootstrap .ui-select-search-hidden{
181-
opacity: 0;
182-
height: 0;
183-
min-height: 0;
184-
padding: 0;
185-
margin: 0;
186-
border:0;
218+
.ui-select-bootstrap .ui-select-search-hidden {
219+
opacity: 0;
220+
height: 0;
221+
min-height: 0;
222+
padding: 0;
223+
margin: 0;
224+
border: 0;
187225
}
188226

189-
.ui-select-bootstrap > .ui-select-match > .btn{
227+
.ui-select-bootstrap > .ui-select-match > .btn {
190228
/* Instead of center because of .btn */
191229
text-align: left !important;
192230
}
@@ -198,7 +236,8 @@ body > .select2-container.open {
198236
}
199237

200238
/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
201-
.ui-select-bootstrap > .ui-select-choices ,.ui-select-bootstrap > .ui-select-no-choice {
239+
.ui-select-bootstrap .ui-select-choices,
240+
.ui-select-bootstrap .ui-select-no-choice {
202241
width: 100%;
203242
height: auto;
204243
max-height: 200px;
@@ -261,6 +300,22 @@ body > .ui-select-bootstrap.open {
261300
border-right: 1px solid #428bca;
262301
}
263302

303+
304+
.ui-select-bootstrap .ui-select-choices {
305+
padding: 5px 0;
306+
margin: 0;
307+
list-style: none;
308+
309+
.ui-select-bootstrap .ui-select-header-group-selectable:hover {
310+
background-color: #f5f5f5;
311+
}
312+
313+
.ui-select-bootstrap .ui-select-header-group-selectable {
314+
color: black;
315+
cursor: pointer;
316+
padding: 3px 10px;
317+
}
318+
264319
.ui-select-bootstrap .ui-select-choices-row>span {
265320
cursor: pointer;
266321
display: block;
@@ -272,51 +327,87 @@ body > .ui-select-bootstrap.open {
272327
white-space: nowrap;
273328
}
274329

275-
.ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-bootstrap .ui-select-choices-row>span:focus {
276-
text-decoration: none;
277-
color: #262626;
278-
background-color: #f5f5f5;
330+
.ui-select-bootstrap .ui-select-choices-row > span {
331+
cursor: pointer;
332+
display: block;
333+
padding: 3px 20px;
334+
clear: both;
335+
font-weight: 400;
336+
line-height: 1.42857143;
337+
color: #333;
338+
white-space: nowrap;
339+
}
340+
341+
.ui-select-bootstrap .ui-select-choices-row > span:hover, .ui-select-bootstrap .ui-select-choices-row > span:focus {
342+
text-decoration: none;
343+
color: #262626;
344+
background-color: #f5f5f5;
345+
}
346+
347+
.ui-select-bootstrap .ui-select-choices-row.active > span {
348+
color: #fff;
349+
text-decoration: none;
350+
outline: 0;
351+
background-color: #428bca;
279352
}
280353

281-
.ui-select-bootstrap .ui-select-choices-row.active>span {
282-
color: #fff;
283-
text-decoration: none;
284-
outline: 0;
285-
background-color: #428bca;
354+
.ui-select-bootstrap .ui-select-choices-row.disabled > span,
355+
.ui-select-bootstrap .ui-select-choices-row.active.disabled > span {
356+
color: #777;
357+
cursor: not-allowed;
358+
background-color: #fff;
286359
}
287360

288-
.ui-select-bootstrap .ui-select-choices-row.disabled>span,
289-
.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
290-
color: #777;
291-
cursor: not-allowed;
292-
background-color: #fff;
361+
.ui-select-bootstrap .ui-select-footer,
362+
.ui-select-bootstrap .ui-select-header {
363+
display: block;
364+
padding: 5px 20px;
365+
clear: both;
366+
font-weight: 400;
367+
line-height: 1.42857143;
368+
}
369+
370+
.ui-select-bootstrap .ui-select-footer {
371+
border-top: 1px solid #dfe5eb;
372+
}
373+
374+
.ui-select-bootstrap .ui-select-header {
375+
border-bottom: 1px solid #dfe5eb;
376+
}
377+
378+
.ui-select-bootstrap .ui-select-dropdown {
379+
width: 100%;
380+
padding: 0;
381+
margin-top: -1px;
293382
}
294383

295384
/* fix hide/show angular animation */
296385
.ui-select-match.ng-hide-add,
297386
.ui-select-search.ng-hide-add {
298-
display: none !important;
387+
display: none !important;
299388
}
300389

301390
/* Mark invalid Bootstrap */
302391
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
303-
border-color: #D44950;
392+
border-color: #D44950;
304393
}
305394

306395
/* Handle up direction Bootstrap */
307396
.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
308-
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
397+
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
309398
}
310399

311400
.ui-select-bootstrap .ui-select-match-text {
312-
width: 100%;
313-
padding-right: 1em;
401+
width: 100%;
402+
padding-right: 1em;
314403
}
404+
315405
.ui-select-bootstrap .ui-select-match-text span {
316-
display: inline-block;
317-
width: 100%;
318-
overflow: hidden;
406+
display: inline-block;
407+
width: 100%;
408+
overflow: hidden;
319409
}
410+
320411
.ui-select-bootstrap .ui-select-toggle > a.btn {
321412
position: absolute;
322413
height: 10px;
@@ -326,10 +417,10 @@ body > .ui-select-bootstrap.open {
326417

327418
/* Spinner */
328419
.ui-select-refreshing.glyphicon {
329-
position: absolute;
330-
right: 0;
331-
padding: 8px 27px;
332-
}
420+
position: absolute;
421+
right: 0;
422+
padding: 8px 27px;
423+
}
333424

334425
@-webkit-keyframes ui-select-spin {
335426
0% {
@@ -341,6 +432,7 @@ body > .ui-select-bootstrap.open {
341432
transform: rotate(359deg);
342433
}
343434
}
435+
344436
@keyframes ui-select-spin {
345437
0% {
346438
-webkit-transform: rotate(0deg);

0 commit comments

Comments
 (0)