Select2Choice component issues

[Lois GreeneHernandez <lg...@knoa.com>]

I need to slightly modify the behavior of a wicket select2Choice dropdown component.
When you've selected a choice if the choice is longer than the window, you see your choice truncated with elipses.

I'm wondering if its possible to do one of the following:
1) Make the choice scrollable
2) Add a title (e.g. tooltip) to the field with the value of the full choice.

Please note that I've attempted to do this through the developer tools in IE and have been mostly unsuccesful as far as scrolling goes.  When a manually add a title attribute on the div with the class "select2-drop-mask" in the markup, I'm able to get a title.  When I attempt to add that same title in wicket it does not show up.  I believe this is because the select2choice is made up of more than one piece of mark up and through wicket there is no way to isolate that one piece of markup.

Any advice would be greatly apprecated.

Here is my Java wicket code for this component.

      final FormComponent dictionaryEntryField = form.newSelect2Choice(form, "dictionaryEntry", SimpleAjaxEventHandler.get(),
          new PropertyModel<String>(dictModelBean, "dictionaryEntry"),
          new DictTextChoiceProvider(dictModelBeans), 300,
          new ResourceModel("dictionary.mapping.dictentry.label"), LabeledFormField.LABEL.LEFT);
      dictionaryEntryField.setRequired(true);
      dictionaryEntryField.add(new AttributeModifier("title", new Model("Test Title")));

I'm never able to see the mouseover.

The following is a section of the markup that is created by wicket.

<div title="Test Title" class="select2-drop-mask" id="select2-drop-mask" style="width: 1247px; height: 1169px; display: block;"></div>

title="Test Title" was added manually through IE developer tools and
I'm able to see the title on mouseover.

Thanks

Lois

Re: Select2Choice component issues

[Martin Grigorov <mg...@apache.org>]

Hi,

On Wed, Oct 14, 2015 at 7:06 PM, Lois GreeneHernandez <
lgreenehernandez@knoa.com> wrote:

> I need to slightly modify the behavior of a wicket select2Choice dropdown
> component.
> When you've selected a choice if the choice is longer than the window, you
> see your choice truncated with elipses.
>
> I'm wondering if its possible to do one of the following:
> 1) Make the choice scrollable
> 2) Add a title (e.g. tooltip) to the field with the value of the full
> choice.
>
> Please note that I've attempted to do this through the developer tools in
> IE and have been mostly unsuccesful as far as scrolling goes.  When a
> manually add a title attribute on the div with the class
> "select2-drop-mask" in the markup, I'm able to get a title.  When I attempt
> to add that same title in wicket it does not show up.  I believe this is
> because the select2choice is made up of more than one piece of mark up and
> through wicket there is no way to isolate that one piece of markup.
>
> Any advice would be greatly apprecated.
>
> Here is my Java wicket code for this component.
>
>       final FormComponent dictionaryEntryField =
> form.newSelect2Choice(form, "dictionaryEntry", SimpleAjaxEventHandler.get(),
>           new PropertyModel<String>(dictModelBean, "dictionaryEntry"),
>           new DictTextChoiceProvider(dictModelBeans), 300,
>           new ResourceModel("dictionary.mapping.dictentry.label"),
> LabeledFormField.LABEL.LEFT);
>       dictionaryEntryField.setRequired(true);
>       dictionaryEntryField.add(new AttributeModifier("title", new
> Model("Test Title")));
>
> I'm never able to see the mouseover.
>
> The following is a section of the markup that is created by wicket.
>

I think this is not quite correct. Please check the HTML markup in the raw
HTTP response. I believe the "title" attribute is actually on the <select>
HTML element. This is what Wicket generates. It is select2.js that copies
it to the generated (by the JS code) <div>. If this is the case then I'd
suggest you to ask for more info in Select2's forum (googlegroup).


>
> <div title="Test Title" class="select2-drop-mask" id="select2-drop-mask"
> style="width: 1247px; height: 1169px; display: block;"></div>
>
> title="Test Title" was added manually through IE developer tools and
> I'm able to see the title on mouseover.
>
> Thanks
>
> Lois
>
>