Difference between revisions of "Replace single questions dropdown by plugin"

From Catglobe Wiki
Jump to: navigation, search
(Description)
(Description)
Line 1: Line 1:
 
== Description ==
 
== Description ==
  
When viewing in both Single and Single grid dropdown layout. There are 3 problems in this case because using the default select tag:<br style="box-sizing: inherit; color: #1d1c1d; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">'''• '''Some characters on keyboard decode/encode problem. Such as: Ampersand ( & ), single quotation&nbsp; ( ' ), double quotation marks ( " ), is more than ( &gt; ), is less than ( &lt; ).<br style="box-sizing: inherit; color: #1d1c1d; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">'''• '''Same problem with characters not on keyboard. For example: ÷, ×, ±, ≠, ≡, ≤, ≥, …, ‘, °C and maybe more than that.<br style="box-sizing: inherit; color: #1d1c1d; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">'''•''' Problem with display HTML format in dropdown list when using it to design UI.
+
When viewing in both Single and Single grid dropdown layout. There are 3 problems because using the default select dropdown tag:<br style="box-sizing: inherit; color: #1d1c1d; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">'''• '''Some characters on keyboard decode/encode problem. Such as: Ampersand ( & ), single quotation&nbsp; ( ' ), double quotation marks ( " ), is more than ( &gt; ), is less than ( &lt; ).<br style="box-sizing: inherit; color: #1d1c1d; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">'''• '''Same problem with characters not on keyboard. For example: ÷, ×, ±, ≠, ≡, ≤, ≥, …, ‘, °C and maybe more than that.<br style="box-sizing: inherit; color: #1d1c1d; font-family: Slack-Lato, Slack-Fractions, appleLogo, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: common-ligatures; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">'''•''' Problem with display HTML format in dropdown list when using it to design UI.
  
 
== Expectation ==
 
== Expectation ==

Revision as of 09:52, 26 October 2022

Description

When viewing in both Single and Single grid dropdown layout. There are 3 problems because using the default select dropdown tag:
Some characters on keyboard decode/encode problem. Such as: Ampersand ( & ), single quotation  ( ' ), double quotation marks ( " ), is more than ( > ), is less than ( < ).
Same problem with characters not on keyboard. For example: ÷, ×, ±, ≠, ≡, ≤, ≥, …, ‘, °C and maybe more than that.
Problem with display HTML format in dropdown list when using it to design UI.

Expectation

These decode/encode problems will be fix and display normally like other question type and layout.

Example

Before: Before-replace.png


After: File:After-replace.PNG

Solution

Replace select dropdown default by using plugin 'select2'.
URL: https://select2.org/

Code

Add this code to Javascript editor in single or single grid dropdown layout.

Question.bind('afterShowQuestion', function(ev, question, $el) {
	$.when(
		$.fn.select2 || $.ajax({
			type: 'GET',
			dataType: 'script',
			cache: true,
			url: 'https://cdn.catglobe.com/select2-4.1.0/js/select2.min.js'
		}),
		$.fn.select2 || $('<link/>', {rel: 'stylesheet', href: 'https://cdn.catglobe.com/select2-4.1.0/css/select2.min.css'}).appendTo('head')
	).done(function() {
		$('select', $el).select2({
			minimumResultsForSearch: Infinity,
			width: '100%',
			templateResult: function(state) {
				//custom option template in dropdown
				if (!$(state.element).instance()) return null;
				return $('<div/>').html(state.text).css({'text-align': 'left'});
			},
			templateSelection: function(state) {
				//custom selected value
				if (!$(state.element).instance()) return question.selectText;
				return $('<div/>').html(state.text).css({'text-align': 'left'});
			}
		});
		$('.select2-selection', $el).css({height: 'auto', 'min-height': '28px'});
	});
});