Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML colors and fonts does not work if Lazy Load = FALSE #120

Open
ScottHollows opened this issue Jan 16, 2020 · 1 comment
Open

HTML colors and fonts does not work if Lazy Load = FALSE #120

ScottHollows opened this issue Jan 16, 2020 · 1 comment

Comments

@ScottHollows
Copy link

ScottHollows commented Jan 16, 2020

Summary

HTML colors and fonts are begin stripped from the drop list display text if LAZY LOAD = FALSE
The correct behaviour is the HTML should be left as is

Description

I want to display the drop down values with mixed fonts, colours, bold etc

This works correctly if LAZY LOAD = TRUE

If I switch off LAZY LOAD, the colours and fonts are stripped back to plain text

Steps to reproduce

  1. create a Select2 Item
  2. Leave LazyLoad off (this is the default)
  3. Use this SQL Query. It includes HTML text to show bold red text for "Out of Stock"
select name, id from (
          (select 'Paper'     name ,1 id from dual)
union all (select 'Pen <font size="5" color="red"><b>Out of Stock</b></font>'  ,2 from dual)
union all (select 'Ruler'   ,3 from dual)
union all (select 'Stapler' ,4 from dual)
)
  1. Run the page.
    The red bold text has been stripped to plain text
    This is the incorrect behaviour

  2. edit the page and set LAZY LOAD = TRUE for the Select2 item

  3. Run the page.
    The red bold text now correctly appears
    This is the correct behaviour

Request

Please change so the colours and fonts are never stripped out, as per LAZY LOAD = TRUE

Urgency

This is probably a low priority for other people, it is a high priority for me as I need to use HTML data tags to store an extra values in the display text. When the value is changed I use Javascript to get the value from the text. Unfortunately the extra value is getting stripped out of the text when the colours and fonts are stripped out.

Workaround

Enable LAZY LOADING although this is not appropriate for list items that have a small number of values

image

@rimblas
Copy link
Contributor

rimblas commented Jan 16, 2020

@ScottHollows have you played with the templateSelection & templateResult?

In the "Extra Options" field you can specify a function to manipulate the values and format them. For example:
image

/** 
 * Used to display the color options on a Select2 dropdown
 *
 * @param color {String} color class
 * @return {String} span tag with color-option and color param values
 */
function Select2formatColor (color) {
  if (!color.id) { return $('<span class="color-option"/><span>' + '</span>'); }
  var $color = $(
    '<span class="color-option ' + color.element.value + '"/><span>' + '</span>'
  );
  return $color;
}

Final result:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants