Hi, I have a page where the text values of the igCombo are significantly longer than the width of the control. In this case, in some browsers, after selecting a text value, the end of the text is visible.
Customer requirement is to display the beginning of the text if it is longer than the control (as it is currently the case when the dropdown list is open). How could this be achieved that works on all major browsers?
I attach an example, showing two igCombo's side by side.
Actual behavior: When selecting a value from the first combo, the end of the text is visible in that combo.
Expected behavior: When selecting a value from the first combo, the beginning of the text should be visible in that combo. The best would be ig this happened right after selection, but it may be acceptable if it is shown on focus lost (i.e. clicking at the second combo for example).
We were experimenting with something like:
var $el = $('.ui-igcombo-field', '#combo1'); var range = $el.get(0).createTextRange(); range.collapse(true); range.moveEnd('character', 0); range.moveStart('character', 0); range.select();
This fixes the issue on Chrome and Firefox, but causes a problem in IE, it positions the cursor to the beginning after typing a character, so, trying to use type-ahead search and trying to type "abc" writes "cba" so it's like typing backwards.
So, do you have any better workaround for this issue?
regards,
Peter
Hello Peter,
Thank you for contacting us.
This behavior is by design and we do not provide an option to tweak it. Please take a look at the source code of the our method which moves the caret to the end - https://github.com/IgniteUI/ignite-ui/blob/master/src/js/modules/infragistics.ui.combo.js#L2862. You can see how we move the caret and move it the same way to the start instead of to the end. After that you should call that code on rendered and dropDownClosed events.
I made a sample demonstrating the approach.
Please let me know if you need anything else.
Tihomir,
The proposed solutuion does work in Chrome and Firefox, it does not work in IE 11 at all.
Could you please show me a solution which also works in IE 11.
As I already mentioned - this is not supported by igCombo.
However, you can suggest this as a new product idea for future versions at <http://ideas.infragistics.com>.
Steps to create your idea:
1. Log into the Infragistics Product Ideas site at http://ideas.infragistics.com (creating a new login if needed).2. Navigate to the product / platform channel of your choice (e.g. WPF, Windows Forms, ASP.NET, HTML5 / Ignite UI, iOS / NucliOS, etc.)3. Add your product idea and be sure to be specific and provide as much detail as possible. Explain the context in which a feature would be used, why it is needed, why it can’t be accomplished today, and who would benefit from it. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it. Be convincing!
The product ideas site allows you to track the progress of your ideas at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you.
If you want this feature to be specifically developed for you, please contact our d3 services - http://d3.infragistics.com/contact/.
Regarding my approach, you can tweak it to work on all of the browsers.
I am attaching a modified version of it. Keep in mind this is an approach you can build on, it is not a final solution.
Please let me know if you have other issues.