deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-22 23:42:16 +02:00
Code Issues Projects Releases Wiki Activity

Always hide remove button if no value is selected

Browse source 
In some cases, the remove item X button is not hidden when there is no
selection made from the dropdown. This is not as usable, since there's
no item to clear, hence an effective noop.

The condition I saw seeing this issue arise is in single selects with
a placeholder value, a selection has been made, and then cleared: the
button HTML remains.

To fix, add some styles to hide the button if the select doesn't have a
value selected, in this case keying off of it's parents `data-value`
property.

fixes #684
This commit is contained in:
Chris DeLuca 2019-11-07 15:11:22 -05:00
parent b5b593a62f
commit 363b3b4fc4
4 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
public/assets/images/browserconfig.xml
View file

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/assets/images/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/assets/images/mstile-150x150.png"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>

4
public/assets/styles/choices.css
View file

@ -72,6 +72,10 @@
box-shadow: 0px 0px 0px 2px #00bcd4;
}
.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
display: none;
}
.choices[data-type*='select-one']:after {
content: '';
height: 0;

2
public/assets/styles/choices.min.css vendored
View file

File diff suppressed because one or more lines are too long

3
src/styles/choices.scss
View file

@ -83,6 +83,9 @@ $choices-icon-cross-inverse: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiI
box-shadow: 0px 0px 0px 2px $choices-highlight-color;
}
}
.#{$choices-selector}__item[data-value=''] .#{$choices-selector}__button {
display: none;
}
&:after {
content: '';
height: 0;