Problem with dbjoin as multiselect in bootstrap_tabs template

[mirceat]

Hello,

Please take a look at the bootstrap_tabs template in Forms, multiselect dbjoin elements with "enhanced dropdowns" option enabled are rendered as in picture below. Works fine for default bootstrap template.

Fresh J4 installation, Fabrik Zeta, Php 8.2. Thank you.

 

[achartier]

I am not seeing this on my test site. What J! template are you using? I tested Cassiopeia and Helix Ultimate. Both rendered fine. Do you have a link you can point me to?

 

[troester]

Also ok on my site.
Did you enable "Enhanced Dropcowns" (= per Element) in Fabrik Options?

 

[mirceat]

No link for now, sorry, only localhost for testing.

Enhanced is enabled for all elements. I also tried "per element", same problem. I'm using Cassiopea. Did you checked the bootstrap tabs template for Fabrik forms? the problem appear only with this template..

p.s: I've changed the php version, is now 8.1.2, don't know if it matter

 

[troester]

What are your elements "Layout" settings in "Bootstrap class"? It looks very small.
Any JS errors in your browser console?

 

[mirceat]

Bootstrap class: col-sm-10. This is how it looks in default bootstrap template. No error in console.

 

[troester]

Yes, this is as it should be, and it is also with bootstrap_tabs on my sites.

Do you have the original F4 bootstrap_tabs template, without custom CSS or overrides?
Which browser?

 

[mirceat]

i know that, but it doesn't happen in bootstrap tabs template, only in bootstrap:

bootstrap:

bootstrap tabs:

 

[troester]

What happens if you set "labels above"?
Did you cut your form in the screenshot or is this the (very small) width of your bootstrap_tabs form?
Any difference if you are working in the backend?

It looks like it's a matter of form width.

 

[mirceat]

The screenshot was cut out. Here is with label above, full screenshot of form, same problem

Administrator area:

 

[troester]

Strange. What do you get when inspecting the element?

 

[mirceat]

 

[mirceat]

Can you please check on your side if there is something about "Details view" template in Form? Set it to bootstrap tabs then Default, then again and also play with "Label" (Left, Above etc), it might be something wrong on my website or a cache problem because sometimes the elements appear ok..

 

[troester]

I think the issue is the choosen-container style "width: 0px". But this is computed somewhere by some JS...

Ok, replicatable: It's only if the element is not in the first group/tab

 

[troester]

Workaround:
Add custom css in bootstrap_tabs
.chosen-container-multi {width:100%!important}

 

[mirceat]

Thank you, works fine now