[Bug]: When using "copy the drag and drop form layout" no more than 1 photo can be shown and switching between tabs stops to work

[gioman]

What is the bug? (in English)

Scenario:

a) a (postgis) point table that a few fields and among them has 2 in which are stored URLs pointing to a photo

b) in QGIS a D&D form is created with 2 tabs, the fields that store the URLs to the photos are added to the first tab

c) in LM plugin for that layer is used the option "QGIS HTML maptip" > "copy the drag and drop form layout"

The resulting popup in LMWC shows the two tabs, but in the first one only the first photo shows up

and also clicking on the second tab does nothing (meaning that it gets stuck to the content of the first tab)

A similar behavior happens if the fields storing the URLs are placed in two separate tabs: is possible to open/see the content the first tab (included the photo), but then clicking on the second tab does nothing.

This is the code generated by LM plugin:

<div class="container popup_lizmap_dd" style="width:100%;">
    <ul class="nav nav-tabs">

  <li class="active"><a href="#popup_dd_[% $id %]_Dados" data-toggle="tab">Dados</a></li>

  <li class=""><a href="#popup_dd_[% $id %]_Dim_Tampa" data-toggle="tab">Dim Tampa</a></li>
</ul>
<div class="tab-content">
  <div id="popup_dd_[% $id %]_Dados" class="tab-pane active">
    
                    [% CASE
                        WHEN "Tipo" IS NOT NULL OR trim("Tipo") != ''
                        THEN concat(
                            '<p>', '<b>Tipo</b>',
                            '<div class="field">', 
                    aggregate(
                        layer:='pl1_1db11e29_82cf_4879_a764_db581708c0a8',
                        aggregate:='concatenate',
                        expression:=to_string(label),
                        filter:=
                    "id" = attribute(@parent, 'Tipo')
                
                    ), '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "SoleiraAcabada" IS NOT NULL OR trim("SoleiraAcabada") != ''
                        THEN concat(
                            '<p>', '<b>SoleiraAcabada</b>',
                            '<div class="field">', 
                    aggregate(
                        layer:='pl3_f3d8be8b_fa8d_4e19_90dd_a46f45c0097b',
                        aggregate:='concatenate',
                        expression:=to_string(label),
                        filter:=
                    "id" = attribute(@parent, 'SoleiraAcabada')
                
                    ), '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "Prof_Soleira" IS NOT NULL OR trim("Prof_Soleira") != ''
                        THEN concat(
                            '<p>', '<b>Prof_Soleira</b>',
                            '<div class="field">', "Prof_Soleira", '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "Prof_TuboSaida" IS NOT NULL OR trim("Prof_TuboSaida") != ''
                        THEN concat(
                            '<p>', '<b>Prof_TuboSaida</b>',
                            '<div class="field">', "Prof_TuboSaida", '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "Observacoes" IS NOT NULL OR trim("Observacoes") != ''
                        THEN concat(
                            '<p>', '<b>Observacoes</b>',
                            '<div class="field">', "Observacoes", '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "foto2_vrt" IS NOT NULL OR trim("foto2_vrt") != ''
                        THEN concat(
                            '<p>', '<b>foto2_vrt</b>',
                            '<div class="field">', 
                    concat(
                       '<a href="',
                       "foto2_vrt",
                       '" target="_blank">
                       ',
                       '
                       <iframe src="',
                       "foto2_vrt",
                       '" width="100%" height="300" title="foto2_vrt"/>',
                       '
                       </a>'
                    ), '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "foto1_vrt" IS NOT NULL OR trim("foto1_vrt") != ''
                        THEN concat(
                            '<p>', '<b>foto1_vrt</b>',
                            '<div class="field">', 
                    concat(
                       '<a href="',
                       "foto1_vrt",
                       '" target="_blank">
                       ',
                       '
                       <iframe src="',
                       "foto1_vrt",
                       '" width="100%" height="300" title="foto1_vrt"/>',
                       '
                       </a>'
                    ), '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
  </div>

  <div id="popup_dd_[% $id %]_Dim_Tampa" class="tab-pane ">
    
                    [% CASE
                        WHEN "TampaNome" IS NOT NULL OR trim("TampaNome") != ''
                        THEN concat(
                            '<p>', '<b>TampaNome</b>',
                            '<div class="field">', "TampaNome", '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "TampaGeometria" IS NOT NULL OR trim("TampaGeometria") != ''
                        THEN concat(
                            '<p>', '<b>TampaGeometria</b>',
                            '<div class="field">', 
                    aggregate(
                        layer:='pl4_59566fa1_d19d_4bae_b8a9_19172e3ad2ed',
                        aggregate:='concatenate',
                        expression:=to_string(label),
                        filter:=
                    "id" = attribute(@parent, 'TampaGeometria')
                
                    ), '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "TampaDim1" IS NOT NULL OR trim("TampaDim1") != ''
                        THEN concat(
                            '<p>', '<b>TampaDim1</b>',
                            '<div class="field">', "TampaDim1", '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "TampaDim2" IS NOT NULL OR trim("TampaDim2") != ''
                        THEN concat(
                            '<p>', '<b>TampaDim2</b>',
                            '<div class="field">', "TampaDim2", '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
    
                    [% CASE
                        WHEN "TampaTipo" IS NOT NULL OR trim("TampaTipo") != ''
                        THEN concat(
                            '<p>', '<b>TampaTipo</b>',
                            '<div class="field">', 
                    aggregate(
                        layer:='pl5_f6c09406_117d_49d3_8693_8a9c44b57c0e',
                        aggregate:='concatenate',
                        expression:=to_string(label),
                        filter:=
                    "id" = attribute(@parent, 'TampaTipo')
                
                    ), '</div>',
                            '</p>'
                        )
                        ELSE ''
                    END %]
  </div>
</div>
</div>
<style>
    div.popup_lizmap_dd {
        margin: 2px;
    }
    div.popup_lizmap_dd div {
        padding: 5px;
    }
    div.popup_lizmap_dd div.tab-content{
        border: 1px solid rgba(150,150,150,0.5);
    }
    div.popup_lizmap_dd ul.nav.nav-tabs li a {
        border: 1px solid rgba(150,150,150,0.5);
        border-bottom: none;
        color: grey;
    }
    div.popup_lizmap_dd ul.nav.nav-tabs li.active a {
        color: #333333;
    }
    div.popup_lizmap_dd div.tab-content div.tab-pane div {
        border: 1px solid rgba(150,150,150,0.5);
        border-radius: 5px;
        background-color: rgba(150,150,150,0.5);
    }
    div.popup_lizmap_dd div.tab-content div.tab-pane div.field,
    div.popup_lizmap_dd div.field,
    div.popup_lizmap_dd div.tab-content div.field {
        background-color: white;
        border: 1px solid white;
    }
    div.popup_lizmap_dd div.tab-content legend {
        font-weight: bold;
        font-size: 1em !important;
        color: #333333;
        border-bottom: none;
        margin-top: 15px !important;
    }

</style>

Steps to reproduce the issue

See above.

Versions, safeguards, check summary etc

Versions :

• Lizmap Web Client : 3.6.13
• Lizmap plugin : 4.3.16
• QGIS Desktop : 3.36.3
• QGIS Server : 3.36.3
• Py-QGIS-Server : not used
• QGIS Server plugin atlasprint : not found
• QGIS Server plugin lizmap_server : 2.9.4
• QGIS Server plugin wfsOutputExtension : 1.8.1

List of safeguards :

• Mode : safe
• Allow parent folder : no
• Prevent other drive : yes
• Prevent PG service : yes
• Prevent PG Auth DB : yes
• Force PG user&pass : yes
• Prevent ECW : yes

Check Lizmap plugin

• I have done the step just before in the Lizmap QGIS desktop plugin before opening this ticket. Otherwise, my ticket is not considered valid and might get closed.

Operating system

Ubuntu 22.04

Browsers

Firefox, Chrome

Browsers version

FF 127, CH 126

Relevant log output

No response