You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Arunachalam Sibisakkaravarthi <ar...@mcruncher.com> on 2022/06/22 09:33:40 UTC
BootstrapMultiSelect shows empty list without any options.
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*
Re: BootstrapMultiSelect shows empty list without any options.
Posted by Arunachalam Sibisakkaravarthi <ar...@mcruncher.com>.
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 <ba...@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 (
> arunachalam@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*
>
>
Re: BootstrapMultiSelect shows empty list without any options.
Posted by Bas Gooren <ba...@iswd.nl>.
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 (
arunachalam@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*
Re: BootstrapMultiSelect shows empty list without any options.
Posted by Arunachalam Sibisakkaravarthi <ar...@mcruncher.com>.
Thanks Martin for your feedback.
I tried your suggestion, but it didn't help me to solve the problem.
Looks, we have some issues on loading css/js resources in our webapp. I
will investigate more on this issue.
*Thanks And RegardsSibi.ArunachalammCruncher*
On Thu, Jun 23, 2022 at 3:04 PM Martin Grigorov <mg...@apache.org>
wrote:
> Hi,
>
> Here are some possible reasons:
>
> 1) getMultiSelectItems() returns empty list
> 2) you may need to disable CSP in your application (
>
> https://nightlies.apache.org/wicket/guide/9.x/single.html#_content_security_policy_csp
> )
> 3) disable COOP and/or COEP (
>
> https://nightlies.apache.org/wicket/guide/9.x/single.html#_cross_origin_isolation_with_coop_and_coep
> )
>
> On Wed, Jun 22, 2022 at 12:34 PM Arunachalam Sibisakkaravarthi <
> arunachalam@mcruncher.com> wrote:
>
> > 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*
> >
>
Re: BootstrapMultiSelect shows empty list without any options.
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
Here are some possible reasons:
1) getMultiSelectItems() returns empty list
2) you may need to disable CSP in your application (
https://nightlies.apache.org/wicket/guide/9.x/single.html#_content_security_policy_csp
)
3) disable COOP and/or COEP (
https://nightlies.apache.org/wicket/guide/9.x/single.html#_cross_origin_isolation_with_coop_and_coep
)
On Wed, Jun 22, 2022 at 12:34 PM Arunachalam Sibisakkaravarthi <
arunachalam@mcruncher.com> wrote:
> 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*
>