Hi Bas,
Yes this seems to be a display issue related to css/js.
I thought it would be a JavaScript issue. Because I compared the css and js
in our webapp and quickstart.
I don't see any difference in CSS and no other resources override
bootstrap-select,
Observations when I inspected rendered html page
1. Following js script is missing in our webapp
2. Options displayed with some UI glitches when "dropdown-menu" is
removed from div class
Missing Java Script
> <script type="text/javascript" nonce=""> 2/*<![CDATA[*/
> 3Wicket.Event.add(window,
> "domready", function(event) {
> 4$('#bootstrapMultiSelect1').selectpicker({"multiple":true});;
> 5Wicket.Event.publish(Wicket.Event.Topic.AJAX_HANDLERS_BOUND); 6;}); 7/*]]>*/
> 8</script>
> <div class="dropdown-menu show" style="max-height: 387px; overflow:
> hidden; min-height: 116px; position: absolute; transform: translate3d(5px,
> 38px, 0px); top: 0px; left: 0px; will-change: transform;"
> x-placement="bottom-start"><div class="inner show" role="listbox"
> id="bs-select-1" tabindex="-1" aria-multiselectable="true"
> style="max-height: 369px; overflow-y: auto; min-height: 98px;"><ul
> class="dropdown-menu inner show" role="presentation" style="margin-top:
> 0px; margin-bottom: 0px;"><li class="selected"><a role="option"
> class="dropdown-item selected" id="bs-select-1-0" tabindex="0"
> aria-selected="true" aria-setsize="5" aria-posinset="1"><span class="
> bs-ok-default check-mark"></span><span class="text">A</span></a></li><li
> class="selected"><a role="option" class="dropdown-item selected"
> id="bs-select-1-1" tabindex="0" aria-selected="true" aria-setsize="5"
> aria-posinset="2"><span class=" bs-ok-default check-mark"></span><span
> class="text">B</span></a></li><li><a role="option" class="dropdown-item"
> id="bs-select-1-2" tabindex="0" aria-selected="false" aria-setsize="5"
> aria-posinset="3"><span class=" bs-ok-default check-mark"></span><span
> class="text">C</span></a></li><li><a role="option" class="dropdown-item"
> id="bs-select-1-3" tabindex="0" aria-selected="false" aria-setsize="5"
> aria-posinset="4"><span class=" bs-ok-default check-mark"></span><span
> class="text">D</span></a></li><li><a role="option" class="dropdown-item"
> id="bs-select-1-4" tabindex="0" aria-selected="false" aria-setsize="5"
> aria-posinset="5"><span class=" bs-ok-default check-mark"></span><span
> class="text">E</span></a></li></ul></div></div>
>
*Thanks And RegardsSibi.ArunachalammCruncher*
On Wed, Jun 22, 2022 at 6:16 PM Bas Gooren <b...@iswd.nl> wrote:
> Hi!
>
> Sounds like a CSS/display issue.
>
> Did you inspect which css rules apply to the select and its children?
>
> Met vriendelijke groet,
> Kind regards,
>
> Bas Gooren
>
> Op 22 juni 2022 bij 11:34:00, Arunachalam Sibisakkaravarthi (
> arunacha...@mcruncher.com) schreef:
>
> Hi guys,
> We are working to implement bootstrap-select from the Wicket Bootstrap
> Extensions project 5.x into Wicket 9.x + Bootstrap 4.x application.
> But, the BootstrapMultiSelect shows an empty list without any options.
> I inspected the rendered html page, it seems everything is ok and has all
> the options .
>
> Java
> new BootstrapMultiSelect<String>("multiSelectItems",
> getMultiSelectItems());
>
> HTML
> <select class="form-control selectpicker" wicket:id="multiSelectItems"
> multiple="multiple"> </select>
>
> Could you help me to identify and fix the problem?
>
> Components used in our project:
>
> 1. Wicket 9.x
> 2. Wicket Bootstrap 5.x (Bootstrap 4.x)
> 3. JQuery 3.6.0
>
> Note: It works as expected in a simple Wicket quickstart project.
>
> I couldn't find what went wrong in our app.
>
>
>
>
> *Thanks And RegardsSibi.ArunachalammCruncher*
>
>
