[
https://issues.apache.org/jira/browse/WICKET-1716?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Peter Ertl updated WICKET-1716:
-------------------------------
Attachment: wicket-autocompleter-with-css-class-for-1.4.x.patch
wicket-autocompleter-with-css-class-for-1.3.x.patch
> make autocompleter more customizable
> ------------------------------------
>
> Key: WICKET-1716
> URL: https://issues.apache.org/jira/browse/WICKET-1716
> Project: Wicket
> Issue Type: New Feature
> Components: wicket-extensions
> Reporter: Peter Ertl
> Attachments: wicket-autocompleter-with-css-class-for-1.3.x.patch,
> wicket-autocompleter-with-css-class-for-1.4.x.patch
>
>
> disclaimer: Excuse this somehow large explanation :-(
> Problems in current wicket autocompleter implementation (including patch)
> Wicket will by default make the width of the autocompleter the same as the
> width of the related input field. This is often useful but also can be really
> nasty sometimes. Imagine you have a input control to enter the ISBN of a book
> (size: 13 digits). While typing any parts of the book's title, author, genre,
> year or ISBN the autocompleter should popup a list of book entries like which
> contains the matching input string:
> autocompleter output (structure)
> --- item 1 ---
> ISBN 1
> AUTHOR 1
> TITLE 1
> GENRE 1
> YEAR 1
> --- item 2 ---
> ISBN 2
> AUTHOR 2
> TITLE 2
> GENRE 2
> YEAR 2
> --------------
> ...
> --- item n ---
> When pressing enter the input field will be filled with the ISBN of the
> currently selected book.
> BTW since WICKET-488 is resolved the other read-only fields of the form will
> contain title, author, etc. (Thanks, Igor!! :-)
> Now the problem: Typically the autocompleter entry (especially the book
> title) will be a lot a longer than the 13 digit ISBN number. The only chance
> is to make the wicket autocompleter selection as large as required is to make
> the input field ridiculously long (something like 80 chars or even more).
> This is really ugly and wastes a lot of space in the user interface for no
> reason. Also it will confuse the user who thinks the input really needs to be
> that long.
> Typically wicket's autocompleter markup looks like this:
> HTML
> <div id="isbn1-autocomplete-container" style="overflow: auto; position:
> absolute; left: 8px; top: 30px; width: 155px;" class="wicket-aa-container">
> <div class="wicket-aa" id="text1-autocomplete">
> <ul>
> <li class="selected" textvalue="978-1932394986">.....</li>
> <li textvalue="978-1932394222">.....</li>
> ....
> <li textvalue="978-1932311186">.....</li>
> </ul>
> </div>
> </div>
> The 'style' attribute in the <div> contains 'width:155px' and is impossible
> to override from CSS because 'style' is "stronger" (the 'cascading' in css).
> So I attached a patch to enable / disable the adjustment of the width to the
> input field.
> JAVA
> final AutoCompleteSettings opts = new AutoCompleteSettings();
> opts.setAdjustInputWidth(false);
> field.add(new AutoCompleteBehavior(renderer, opts)
> ...
> The markup will now look like this:
> HTML
> <div id="isbn1-autocomplete-container" style="overflow: auto; position:
> absolute; left: 8px; top: 30px;" class="wicket-aa-container">
> Notice the lack of the 'width' attribute...
> Now to resolve problem #1 you could write:
> MYSTYLE.CSS
> .wicket-aa-container {
> width: 600px;
> }
> However this will not only grow the great book autocompleter to the desired
> width but also other autocompleters ever being used on that as well. Also you
> can _NOT_ do this:
> MYSTYLE.CSS
> #isbn1-autocomplete-container {
> width: 600px;
> }
> Because a linked stylesheet is typically static (and cached by the browser)
> and the DOM id of the autocompleter is generated dynamically. I don't
> consider generating dynamic CSS an option for such a simple problem.
> So what would be just great is the possibility to add an extra css class to
> the container tag:
> JAVA
> final AutoCompleteSettings opts = new AutoCompleteSettings();
> opts.setCssClassName("book-autocompleter");
> opts.setAdjustInputWidth(false);
> field.add(new AutoCompleteBehavior(renderer, opts)
> ...
> HTML
> <div id="isbn1-autocomplete-container" style="overflow: auto; position:
> absolute; left: 8px; top: 30px;" class="wicket-aa-container
> book-autocompleter">
> You will immediately notice the additional class name 'book-autocompleter'
> MYSTYLE.CSS
> .book-autocompleter {
> width: 600px;
> }
> To summarize my patch:
> To extra methods in
> org.apache.wicket.extensions.ajax.markup.html.autocomplete.AutoCompleteSettings
> /**
> * Sets an CSS class name to add to the autocompleter markup container
> * <p/>
> * This makes it easier to have multiple autocompleters in your application
> * with different style and layout.
> *
> * @param cssClassName valid CSS class name
> */
> public void setCssClassName(final String cssClassName)
> /**
> * Adjust the width of the autocompleter selection window to the width of
> the related input field.
> * <p/>
> * Otherwise the size will depend on the default browser behavior and CSS.
> *
> * @param adjustInputWidth <code>true</code> if the autocompleter should
> have the same size as
> * the input field, <code>false</code> for
> default browser behavior
> */
> public void setAdjustInputWidth(final boolean adjustInputWidth)
> Unless you call these methods the autocompleter will behave exactly as before
> so this will not break previous code.
> Would be just great to see this patch applied :-)
--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.
