combobox rotation toggle button

Vaadin 6 / 7 / 8
1

I am working with Vaadin 7.6 and multiselect combobox.
I tried to change sign on combobox button for selection by rotation animation (from arrow down in arrov up an reverse), but I could not do that.

whether someone can help me ?

Thanks

2

Hi,

I found this from StackOverflow:
http://stackoverflow.com/questions/21322626/applying-css-rules-based-on-input-checkbox-status

Is that what you’re after?

-Olli

3

Hi

I solved problem with rotation arrow on multiselects combo button.

In class : …SessionInitListener I added next jquery function :

head.appendElement(“script”).append(“$(document).on(‘click’, ‘div.v-filterselect-button’,function()”

  • “{ var attr = $(this).parent().attr(‘checked’);”

//+ " $(this).parent().removeClass( "combobox-rotate-down" ); "

  • “if (attr == undefined)”

+" { $(this).parent().attr("checked","true");"

  • " $(this).css({‘transform’: ‘rotate(180deg)’,‘border-right’: ‘1px solid #999999’,‘border-left’: ‘none’});"

  • " }"

  • "else "

  • "{if(attr == ‘checked’) "

+" { $(this).css({‘transform’: ‘none’,‘border-left’: ‘1px solid #999999’,‘border-right’: ‘none’});"

+" $(this).parent().removeAttr("checked");}"

  • "else "

  • " { $(this).css({‘transform’: ‘rotate(180deg)’,‘border-right’: ‘1px solid #999999’,‘border-left’: ‘none’});"

+" $(this).parent().attr("checked","true");}"

  • “}}”

  • “);”);

head.appendElement(“script”).append(“$(document).on(‘blur’, ‘.v-filterselect’,function()”

+" { $(this).children().css({‘transform’: ‘none’,‘border-left’: ‘1px solid #999999’,‘border-right’: ‘none’});"

+" $(this).removeAttr("checked");"

  • " $(this).css(‘border-right’, ‘1px solid #999999’);}"

  • “);”);
    Thanks on your replay

4

Nice work!