← All changes | front-end/default-fields/select2/select2.css +43 -12 3.9.9 → 4.0.3 View file →

		@@ -1,21 +1,52 @@
1	1	/* Select 2 Field */
2		-.wppb-select2 span.select2-container{
3		- clear: none;
	2	+
	3	+.wppb-select2 span.select2-container,
	4	+.wppb-select2-multiple span.select2-container {
4	5	width: 69.9% !important;
	6	+ float: left;
5	7	}
6	8
7		-.wppb-select2-multiple span.select2-container{
8		- clear: none;
9		- width: 69.9% !important;
	9	+.select2-container--open input.select2-search__field {
	10	+ outline: none;
	11	+ padding: 5px 10px;
10	12	}
11	13
12		-@media screen and (max-width: 400px){
13		- .wppb-select2 span.select2-container{
14		- clear: none;
15		- width: 100% !important;
16		- }
17		- .wppb-select2-multiple span.select2-container{
18		- clear: none;
	14	+/* Select 2 (Multiple) Field
	15	+ The library keeps the selected options on a single clipped line. They have to wrap
	16	+ and the closed control has to grow with them instead of cutting them off. */
	17	+
	18	+.wppb-select2-multiple .select2-container .select2-selection--multiple {
	19	+ height: auto;
	20	+ overflow: visible;
	21	+}
	22	+
	23	+.wppb-select2-multiple .select2-container .select2-selection--multiple .select2-selection__rendered {
	24	+ display: flex;
	25	+ flex-wrap: wrap;
	26	+ align-items: flex-start;
	27	+ align-content: flex-start;
	28	+ overflow: visible;
	29	+ white-space: normal;
	30	+ text-overflow: clip;
	31	+}
	32	+
	33	+.wppb-select2-multiple .select2-container .select2-selection--multiple .select2-selection__choice {
	34	+ float: none;
	35	+ max-width: 100%;
	36	+ overflow: hidden;
	37	+ text-overflow: ellipsis;
	38	+ white-space: nowrap;
	39	+}
	40	+
	41	+/* The library caps the results list at 200px, which shows about four options and gives
	42	+ no hint that the rest are scrollable. */
	43	+.select2-container .select2-results > .select2-results__options {
	44	+ max-height: 340px;
	45	+}
	46	+
	47	+@media screen and (max-width: 500px){
	48	+ .wppb-select2 span.select2-container,
	49	+ .wppb-select2-multiple span.select2-container {
19	50	width: 100% !important;
20	51	}
21	52	}