how to remove the container tag of List Widgets

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


Fox Chen wrote:

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


Hi,

You can use custom mode and specify any tag you want

Hope this help

 

 

Shingo Lam wrote:

Fox Chen wrote:

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


Hi,

You can use custom mode and specify any tag you want

Hope this help

 


 

 Thanks for you reply,

I've tried to set the Mode to Custom, and Tag = "", But OS is not allowed to set Tag = "".

And I think this is not a solution because It will also generate a tag into <TBODY> and breaks styling.

 

Fox Chen wrote:

Shingo Lam wrote:

Fox Chen wrote:

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


Hi,

You can use custom mode and specify any tag you want

Hope this help

 


 

 Thanks for you reply,

I've tried to set the Mode to Custom, and Tag = "", But OS is not allowed to set Tag = "".

And I think this is not a solution because It will also generate a tag into <TBODY> and breaks styling.

 

Hi,

The tag is required, you cannot leave it blank, try to add "tr" to match with your table 

Hope this help

 

Shingo Lam wrote:

Fox Chen wrote:

Shingo Lam wrote:

Fox Chen wrote:

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


Hi,

You can use custom mode and specify any tag you want

Hope this help

 


 

 Thanks for you reply,

I've tried to set the Mode to Custom, and Tag = "", But OS is not allowed to set Tag = "".

And I think this is not a solution because It will also generate a tag into <TBODY> and breaks styling.

 

Hi,

The tag is required, you cannot leave it blank, try to add "tr" to match with your table 

Hope this help

 

 My Placeholder -> tableContent is tbody


If I set the TAG to tr, I will get the same problem.

<table>

<tbody>

     <tr>  This is the container of List Widgets

             <tr>row1</tr>

             <tr>row2</tr>

     </tr>

</tbody>

</table

 

So the best way to solve problem is bind the data without container. each data generate one <TR>

Fox Chen wrote:

Shingo Lam wrote:

Fox Chen wrote:

Shingo Lam wrote:

Fox Chen wrote:

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


Hi,

You can use custom mode and specify any tag you want

Hope this help

 


 

 Thanks for you reply,

I've tried to set the Mode to Custom, and Tag = "", But OS is not allowed to set Tag = "".

And I think this is not a solution because It will also generate a tag into <TBODY> and breaks styling.

 

Hi,

The tag is required, you cannot leave it blank, try to add "tr" to match with your table 

Hope this help

 

 My Placeholder -> tableContent is tbody


If I set the TAG to tr, I will get the same problem.

<table>

<tbody>

     <tr>  This is the container of List Widgets

             <tr>row1</tr>

             <tr>row2</tr>

     </tr>

</tbody>

</table

 

So the best way to solve problem is bind the data without container. each data generate one <TR>

Hi,

It depends on what you design in the list. And yeah, you can change your placeholder to be a div and handle the list with div to do the same behavior as the table

Thanks 

 

Fox Chen wrote:

Hello everyone, 


I want to create a custom table block.


The block structure is as follows

       --table(Block)

       ----tableHeader(Placeholder)

       ----tableContent(Placeholder)

like

      <table>

           <thead></thead>

           <tbody></tbody>

      </table>

 

User will append a row in tableHeader and setup a List Widgets in tableContent to show the data.


I've got the HTML.


<table> <!-- It's actually a Div -->

           <thead>  <!-- It's actually a Div -->

                 <div>   

                        <div>Header 1</div>

                        <div>Header 2</div>

                </div>

          </thead>

           <tbody> <!-- It's actually a Div -->

                <div class="list list-group">    <!--This will break the styling -->

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                      <div class="row">   

                            <div>Col 1</div>

                           <div>Col 1</div>

                      </div>

                </div>

           </tbody>

</table>


As you can see, List Widgets generate a div as container and break the styling.

What can I do to remove the List Container ?


Many thanks.


 Hello Fox Chen,

If Style-Class "list group" is causing you issue, you can change it to different style of list from properties(See snap). You need to approach trial and hit method to get exact result. 

 Approach 2 : You can also try by removing extra list_item component under your list, this may probably help you. See below snap, you can just remove selected component without affecting your list structure:

Hope it helps!

Thanks,

Sanjay