Problem with hidden last an item of listd custom renderer that hava a a tag

[alexferreira21Participant]

Hi,

I have a custom renderer with a image inside a anchor tag:

return "<a onclick='return viewModel.selecaoEmpresaVM.clicarNoIconeDoGrupo(ko.dataFor(this))' href=\"#\"><img width='13' height='13' style='float: left; margin-right: 5px;' src='../../../images/"+imagem+"'/></a>"+label;

And this works just fine for all items except the last one. Looking the code generated by the jqxListBox, i noticed that below my last item, exists another 3 hidden items that are a copy of that last one, except that they have visible: false.

That hidden item is my problem, because it overlaps my last item, so, the last image of my list can’t be clicked. I can select the last item, but the anchor doesn’t work.

I’ve tryed change the z-index in my renderer, but this hidden items are not rendered by my method. It is a simple copy of the HTML of the last item of my list.

I’m out of ideas. Thanks for any help!
(English is not my first language, sorry for the grammar)

[DimitarParticipant]

Hello alexferreira21,

Please provide us with a complete example, which we can test to determine the source of the issue. You can create a JSFiddle and post the link here.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[alexferreira21Participant]

Hi Dimitar,

Here:

http://jsfiddle.net/7ytUr/2/

In this example you can see that the last item of the list can’t be clicked 100% of the times. If you open in google chrome, and inspec the list with the Developer Tools, you will see that the item with the id “listitem4jqxListBox” (the hidden last element) very often is rendered over the item “listitem3jqxListBox” (Caffé Latte). When this happens I can’t click in the link of the last element of my list. You can see that the mouse pointer don’t even change.

This behaviour seems to be random. In most cases, when you scroll to the bottom of the list, the item “listitem4jqxListBox” overlaps the “listitem3jqxListBox”, but sometimes it doesn’t. If it doesn’t happen, scroll up and down, I assure you that this behaviour will happen.

[Peter StoevKeymaster]

Hi alexferreira21,

Let me try to help with this one.

In general, we do not support dynamic HTML content in jqxListBox, only static content(Images with Text, things like that). In your scenario however, the solution is to update the z-index. Ex: http://jsfiddle.net/jqwidgets/4rJ5G/

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[alexferreira21Participant]

Thank you very much Peter! This solved my problem perfectly!

[Author]

Posts