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.

Sign up for GitHub

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

Jump to bottom

doesn't keep the style. #19

Open
xbaha opened this issue Dec 23, 2019 · 3 comments
Open

doesn't keep the style. #19

xbaha opened this issue Dec 23, 2019 · 3 comments

Comments

@xbaha
Copy link

xbaha commented Dec 23, 2019

I use styling for parent and children, but it's all gone.

function formatResult(node) {
    var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
    return $result;
};

$("#myselect2").select2({
placeholder: 'Select an option',
width: "500px",
data: data,
formatSelection: function(item) {
return item.text
},
formatResult: function(item) {
return item.text
},
templateResult: formatResult,
});
@JacobEvelyn
Copy link
Member

JacobEvelyn commented Dec 23, 2019 •
edited
Loading

Hi @xbaha ! Could you add some screenshots so we can see what you expect it to look like vs. what it does look like? Thanks! ❤️

@xbaha
Copy link
Author

xbaha commented Dec 23, 2019

here with the plugin:
https://drive.google.com/open?id=1v15JeeIcJMsLrdvoSayP2MTtb7PbyUDw
here without:
https://drive.google.com/open?id=1kRd44kLPuYd2yJCCY7csXo2IoPvjrDl0

Thanks

@JacobEvelyn
Copy link
Member

Thanks @xbaha, and sorry for the delay! I see what you're talking about in the screenshots, but I'm not able to reproduce it using the data in test.html in this repo. Here's what I'm seeing:

Without plugin:
Screen Shot 2020-01-28 at 1 16 55 PM

With plugin:
Screen Shot 2020-01-28 at 1 16 37 PM

If it's helpful, here's the code I was using to try to reproduce:

<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
    <style>
      html, body, select {
        font-family: sans-serif;
        font-size: 18px;
        line-height: 18px;

        padding-left: 10px;
        margin-left: 0;
      }

      body {
        /*width: 100%;*/ /* Uncomment for horizontal scrollbar (see README). */
        background-color: #F1EDC2;
      }
    </style>
  </head>
  <body>
    <div style="position: absolute; top: 600px; left: 200px">
      <!-- This should be maximized with the id selector -->
      <select id="test_thing_1" style="width: 200px">
        <option></option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>One fish</option>
        <option>Two fish</option>
        <option>Red fish</option>
        <option>Blue fish</option>
        <option>Black fish</option>
        <option>Blue fish</option>
        <option>Old fish</option>
        <option>New fish</option>
        <option>This one has a little star</option>
        <option>This one has a little car</option>
        <option>Say! What a lot of fish there are.</option>
      </select>
    </div>
    <script>
      // maximize-select2-height v1.0.3
      // (c) Panorama Education 2018
      // MIT License
      !function(t){"use strict"
      var e=t(window),n=t(document),o=function(o,i){return t.extend({cushion:i&&n.width()>e.width()?30:10},o)},i=function(n,i,c,r,s){var u,h,l
      return s?u=window.document.documentElement.clientHeight+e.scrollTop()-i.offset().top:(l=t("#select2-"+n+"-container").parent().parent().parent().offset().top,h=c.height()-i.height(),u=l-e.scrollTop()-h),u-o(r,s).cushion}
      t.fn.maximizeSelect2Height=function(e){return this.each(function(n,o){t(o).on("select2:open",function(){setTimeout(function(){var n=t("#select2-"+o.id+"-results"),c=n.parent(),r=c.parent(),s=r.hasClass("select2-dropdown--below"),u=i(o.id,n,r,e,s)
      c.css("max-height",u),n.css("max-height",u),t(document).trigger("scroll")})})})}}(jQuery)

      function formatResult(node) {
        var $result = $('<span style="padding-left:' + (20 * 1) + 'px;">' + node.text + '</span>');
        return $result;
      }

      $(function () {
        $("#test_thing_1").select2({
          placeholder: 'Select an option',
          width: "500px",
          formatSelection: function(item) {
            return item.text
          },
          formatResult: function(item) {
            return item.text
          },
          templateResult: formatResult,
        }).maximizeSelect2Height();
      });
    </script>
  </body>
</html>

Please let me know when you have code for a minimal reproduction I can look at. Thanks!

@JacobEvelyn JacobEvelyn mentioned this issue Jan 28, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JacobEvelyn @xbaha