1

I'm evaluating using Angular with ui-select2 and wondered whether someone could provide help on hiding the flicker/conversion of the <select> into the select2 component.

It's only very brief, but users can see the component change styles.

Is there a way of hiding it until the select has been modified by select2?

Charles
  • 50,943
  • 13
  • 104
  • 142
sambomartin
  • 6,663
  • 7
  • 40
  • 64

1 Answers1

1

I came across the same problem and I had a look at the source code. The directive is deliberately initialised later by using a timeout. In the code there is a comment saying "Initialize the plugin late so that the injected DOM does not disrupt the template compiler".

My solution (you can see it in this jsplunker: http://plnkr.co/edit/fXjDxs?p=preview ) is to set the visibility of the select tag to "hidden". 

<select ui-select2 ng-model="....." style="visibility: hidden; ">......

When the component is loaded that tag is replaced with a div. In ui-select2.js I have added a line (line 208) to set its visibility to "visible". 

elm.prev().css({"visibility": "visible"});
gioper86
  • 90
  • 1
  • 9
  • the `visibility:hidden` css is copied to the new div. any ideas? – sambomartin Jul 30 '14 at 14:52
  • You're right. I was using an old version. I have set up a jsplunker: http://plnkr.co/edit/fXjDxs?p=preview . My solution is to keep the "visibility:hidden" in the select and I added a line of code in ui-select2.js (line 208) to change the visibility of the div when the component is loaded. – gioper86 Aug 01 '14 at 10:59
  • which is what I've ended up doing :) - i've actually added a line to the ui-select2 directive to ensure it's visible. thanks! – sambomartin Aug 01 '14 at 11:23