SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)

    Select2 plugin styling

    Hi,

    I'm using the select2 plugin on this cut down demo page.

    The basic option tag is this:
    Code:
    <option>An option1 (this text needs to be styled differently)</option>
    I need to find a way to style the text in brackets differently from the main text after the select2 plugin converts it to its own dropdown version.

    The select is transformed to this:

    Code:
    <div class="container">
    		<div class="control-group select-crop">
    				<label for="s2id_autogen1" class="control-label">Select Your option</label>
    				<div style="width: 100%;" id="s2id_testSelect" class="select2-container select2-container-multi select2 select2-container-active select2-dropdown-open">
    						<ul class="select2-choices">
    								<li class="select2-search-choice">
    										<div title="An option3 (this text needs to be styled differently)">An option3 (this text needs to be styled differently)</div>
    										<a tabindex="-1" class="select2-search-choice-close" onclick="return false;" href="#"></a></li>
    								<li class="select2-search-field">
    										<input style="width: 832.283px;" id="s2id_autogen1" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" class="select2-input select2-focused" type="text">
    								</li>
    						</ul>
    				</div>
    				<select data-placeholder="Select option" class="select2 select2-offscreen" style="width:100%" id="testSelect" multiple="" tabindex="-1">
    						<option>An option1 (this text needs to be styled differently)</option>
    						<option>An option2 (this text needs to be styled differently)</option>
    						<option>An option3 (this text needs to be styled differently)</option>
    						<option>An option4 (this text needs to be styled differently)</option>
    						<option>An option5 (this text needs to be styled differently)</option>
    				</select>
    		</div>
    </div>
    
    <!-- end container --> 
    <div class="select2-sizer" style="position: absolute; left: -10000px; top: -10000px; display: none; font-size: 16px; font-family: sans-serif; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: nowrap;"></div>
    <div style="width: 1219px; height: 463px; display: block;" class="select2-drop-mask" id="select2-drop-mask"></div>
    <div id="select2-drop" style="display: block; top: 62px; left: 8px; width: 1203px;" class="select2-drop select2-drop-multi select2-display-none select2-drop-active">
    		<ul class="select2-results">
    				<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
    						<div class="select2-result-label"><span class="select2-match"></span>An option1 (this text needs to be styled differently)</div>
    				</li>
    				<li class="select2-results-dept-0 select2-result select2-result-selectable">
    						<div class="select2-result-label"><span class="select2-match"></span>An option2 (this text needs to be styled differently)</div>
    				</li>
    				<li class="select2-results-dept-0 select2-result select2-result-selectable select2-selected">
    						<div class="select2-result-label"><span class="select2-match"></span>An option3 (this text needs to be styled differently)</div>
    				</li>
    				<li class="select2-results-dept-0 select2-result select2-result-selectable">
    						<div class="select2-result-label"><span class="select2-match"></span>An option4 (this text needs to be styled differently)</div>
    				</li>
    				<li class="select2-results-dept-0 select2-result select2-result-selectable">
    						<div class="select2-result-label"><span class="select2-match"></span>An option5 (this text needs to be styled differently)</div>
    				</li>
    		</ul>
    </div>
    There is an option for templating and using data attributes mentioned in the documentation but I am unable to work out how to tie this into a workable solution.

    I assumed I could add the extra text via a data attribute on the option element.

    e.g.
    Code:
    <option data-txt="this text needs to be styled differently">An option1 </option>
    Then the data-txt attribute content could be appended to the original option content but enclosed inside a span with a class and placed in the revised dropdown selection list and selected item.

    e.g.
    Code:
    An option1 <span class="newtext">this text needs to be styled differently</span>
    The documentation suggest that it is easy and offers the following example code:

    Code:
    function format(state) {
    var originalOption = state.element;
     
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
    }
    However, that's where I get completely lost as I don't know how to call that in relation to my particular example and amend the code to suit.

    Hope that makes sense

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You can attach an anonymous function to the formatSelection setting, E.g.

    Code JavaScript:
    $('select').select2({
        formatSelection: function(item) {
            // Debugging -- open the developer console to see what you can access from the item object
            console.dir(item);
     
            return '<strong>' + item.id + '</strong>';
        }
    });
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Thanks Chris, that was a great help and put me on the right track

    I've managed to get this working here.

    I had to use the escapeMarkup function as it was outputting the tags as text.
    i.e.
    Code:
     function format(item) {
        var originalOption = item.element;
    				var originalText = item.text;
        return originalText + ' ' + '<span class="newTxt">' + $(originalOption).data('mytxt') + '</span>';
        }
    $('#testSelect').select2({
        allowClear: true,
        formatResult: format,
        formatSelection: format,
        escapeMarkup: function(m) { return m; }
    });
    It seems to be working. Can you see any problems with it? (apart from the extra text not being available should JS be off but that's how it is now anyway so there is no loss if js is off but enhancement if on.)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Spoke too soon

    If the options have an apostrophe in the text then it breaks the whole thing.

    e.g.

    http://www.pmob.co.uk/select2/select-test3.htm

    Code:
    	<option data-mytxt="this text needs to be styled differently">Paul's option3</option>
    I need to exclude the apostrophe from messing up the routine. It's fine without it.

    There is one other small problem in that the plugin is adding the text as a title attribute but is including the whole span text html inside the title attribute. There must be an option somewhere to remove the title but I can't see it yet.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Paul,

    If you replace your apostrophes with their HTML entity numbers, then it works.

    E.g.

    Code:
    <option data-mytxt="styled differently">Jim's option 2</option>
    becomes

    Code:
    <option data-mytxt="styled differently">Jim& #8217;s option 2</option>s option 2</option>
    Unfortunately, this feels a bit hackish.
    Let me know if you'd rather have a "cleaner" solution and I'll see what I can come up with.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Please note, there is no space after the & symbol (as there is above).
    I had to insert the space to stop VB from parsing it.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi again,

    Just found a better solution:

    Leave the markup as it is:

    Code:
    <select multiple id="testSelect" style="width:100%" class="select2"  data-placeholder="Select option" >
      <option data-mytxt="this text needs to be styled differently">Fred's option1 </option>
      <option data-mytxt="styled differently">Jim's option 2</option>
      <option data-mytxt="this text needs to be styled differently">Paul's option3</option>
      <option data-mytxt="this text needs to be styled">Chris's option4 </option>
      <option data-mytxt="this text styled differently">Stuart's option5 </option>
    </select>
    Then alter the escapeMarkup function:

    Code:
    escapeMarkup: function(m) { return m.replace(/'/, "&#8217;"); }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi again,

    Just found a better solution:

    Leave the markup as it is:

    Then alter the escapeMarkup function:

    Code:
    escapeMarkup: function(m) { return m.replace(/'/, "&#8217;"); }
    Great Thanks Pullo that fixes the apostrophe nicely.

    I just have to work out how to amend the title attribute that the plugin is adding.
    Code:
    <li class="select2-search-choice">
     <div title="Paul’s option3 <b class=&quot;newTxt&quot;>this text needs to be styled differently</b>">Paul’s option3 <b class="newTxt">this text needs to be styled differently</b></div>
    I'm sure there must be an option as the examples on the documentation page don't have these titles as fas as I can see.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Paul,

    Happy to help.
    Do you want the title attribute removing completely or formatted correctly?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi Paul,

    Happy to help.
    Do you want the title attribute removing completely or formatted correctly?
    Thanks

    I suppose the title attribute should stay in place but without the extraneous html mixed in. If that's not easily possible then just removing it would do.:

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Well, I had a look at the plugin's source code (that you are using on your homepage) and saw:

    Code JavaScript:
    formatted=this.opts.formatSelection(data, choice.find("div"));
     
    if (formatted != undefined) {
      choice.find("div").replaceWith("<div title='"+this.opts.escapeMarkup(formatted)+"'>"+this.opts.escapeMarkup(formatted)+"</div>");
    }

    which means that as we are using the formatSelection option to add a <span> to the results text, formatted will never be undefined, so the return value of the escapeMarkup function will always be inserted into the <div>'s title attribute and we don't have a chance to change this.

    So, I'm like "WTF??" and spent a while looking through the project's issues on its GitHub page and found this: https://github.com/ivaynberg/select2/issues/1399

    Which means that what you are seeing is a bug and if you upgrade to v3.4.2 then the problem will go away

    As an aside, this means that no title attribute will be present on the <div> (which seems to be the desired behaviour).
    If it is important for you to have one, it shouldn't be too hard to add this via an onchange event listener. Just let me know.

    HTH

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Thanks Pullo.

    I'll download the new version and see if it fixes the issue (without causing any other issues)

    I'll need to test it on the real page as there are loads of variations of those selects but hopefully it won't affect them.

    Thanks for your help (and Chris) as I would never have worked my way through this one on my own.

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi Paul,

    I managed to get the full tool tips to show when you hover over the results.
    Here's a demo.

    I did this by creating a wrapper div around the return value of our original format function:

    Code:
    function format(item, container) {
      var originalOption = item.element;
      var originalText = item.text;
      return '<div title="' + originalText + " " + $(originalOption).data('mytxt') + '">' + originalText + ' ' + '<span class="newTxt">' + $(originalOption).data('mytxt') + '</span></div>';
    }
    
    $('#testSelect').select2({
      allowClear: true,
      formatResult: format,
      formatSelection: format
    });
    Also, with the latest version of the plugin, you can do away with escapeMarkup function (at least for this example).

    Let me know if you go with this, as the format function can be tidied up somewhat.

    Reference: https://github.com/ivaynberg/select2/pull/1222

    I should probably go to bed now

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Yes that seemed to do the trick thanks and all working now.

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Good news!

    Just in case you didn't see it, don't overlook my previous post (no.13), re. the title attribute (I notice that you didn't include it in your demo).

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi Paul,

    I managed to get the full tool tips to show when you hover over the results.
    Here's a demo.

    I did this by creating a wrapper div around the return value of our original format function:
    Many thanks.

    I've copied your page locally for future reference but I may leave it without the tooltip for the time being as it is only duplicating what is already displayed so is not really any extra help. However if we need to truncate the text in the option at some point then it may need the tooltip added back in but at present we are letting the text wrap if needed but of course things may change

    I should probably go to bed now
    Thanks again and goodnight


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •