[
https://issues.apache.org/jira/browse/WICKET-1716?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Igor Vaynberg resolved WICKET-1716.
-----------------------------------
Resolution: Fixed
Fix Version/s: 1.4-M3
1.3.5
Assignee: Igor Vaynberg
> 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
> Assignee: Igor Vaynberg
> Fix For: 1.3.5, 1.4-M3
>
> 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 text input field 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 pop up a list of book entries
> which contain 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 set to 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 width of the autocompleter entry shown in the
> popup (especially the book title) will be a lot longer than the 13 digit ISBN
> number. The only chance to grow the wicket autocompleter window to the
> required size is to make the input field ridiculously long so the windows
> will adjust to that size. 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 the problem you could write:
> MYSTYLE.CSS
> .wicket-aa-container {
> width: 300px;
> }
> However this will not only grow the great book autocompleter to the desired
> width but also all other autocompleters ever being used on the same page (or
> the scope of the CSS). Also you can _NOT_ do this:
> MYSTYLE.CSS
> #isbn1-autocomplete-container {
> width: 300px;
> }
> Because a linked stylesheet is typically static (and cached by the browser)
> and the DOM id of the autocompleter is generated dynamically. And, no: 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: 300px;
> }
> To summarize my patch:
> Two 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.
