New Dynamically Tabbed Table Issues

[clemie]

URL:https://valdis.boards.net/

Hello,

I went to try and find support for the plugin, the support button took me here and I searched around for an official thread but did not see one. I also searched the other threads for an answer but could not find one. It seems this plugin was updated as an older version I have listed everything in a row (see below) and the new one does not. I'd like to keep the new one as it offers more options with a side bar and other features.








This is how the current one looks (different site as well, please disregard color scheme that will change after)





The original coding put in is :

<div class="dtt container boards">

   <div class="title-bar{if $[plugin.settings.center_title] == '1'} center{/if}">

       <h2>$[plugin.settings.title]</h2>

   </div>

   <div class="content cap-bottom">

       <table width="100%" cellspacing="0" cellpadding="0" border="0">

           <tr class="dtt_header_row">

               {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}

               <td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">

                   <table class="list" role="grid">

                       <thead>

                           <tr>

                               <th class="dtt_sidebar_title">$[plugin.settings.sidebar_title]</th>

                           </tr>

                       </thead>

                   </table>

               </td>

               <td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>

               {/if}{/if}

               <td valign="top">

                   <table class="list" role="grid">

                       <thead>

                           <tr class="dtt_tabs">

                               {foreach $[plugin.settings.tabs]}

                               <th class="board item clickable" onclick="dtt.toggleTab($(this));">$[plugin.settings.tabs.tab_title]</th>

                               {/foreach}

                           </tr>

                       </thead>

                   </table>

               </td>

               {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}

               <td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>

               <td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">

                   <table class="list" role="grid">

                       <thead>

                           <tr>

                               <th class="dtt_sidebar_title last">

                                   $[plugin.settings.sidebar_title]

                               </th>

                           </tr>

                       </thead>

                   </table>

               </td>

               {/if}{/if}

           </tr>

           <tr class="dtt_content_row">

               {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}

               <td class="dtt_hidden_sidebar_content_cell" valign="top">

                   <table class="list" role="grid">

                       <tbody>

                           <tr>

                               <td class="dtt_sidebar_content">

                                   $[plugin.settings.sidebar_content]

                               </td>

                           </tr>

                       </tbody>

                   </table>

               </td>

               {/if}{/if}

               <td valign="top">

                   <table class="list" role="grid">

                       <tbody>

                           <tr class="dtt_content">

                               <td class="dtt_tabs_content">

                                   {foreach $[plugin.settings.tabs]}

                                   <div style="display: none;">

                                       $[plugin.settings.tabs.content]

                                   </div>

                                   {/foreach}

                               </td>

                           </tr>

                       </tbody>

                   </table>

               </td>

               {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}

               <td class="dtt_hidden_sidebar_content_cell" valign="top">

                   <table class="list" role="grid">

                       <tbody>

                           <tr>

                               <td class="dtt_sidebar_content last">

                                   $[plugin.settings.sidebar_content]

                               </td>

                           </tr>

                       </tbody>

                   </table>

               </td>

               {/if}{/if}

           </tr>

       </table>

   </div>

</div>





I tried replacing it with the following code

<div class="dtt container boards">
   <div class="title-bar{if $[plugin.settings.center_title] == '1'} center{/if}">
       <h2>$[plugin.settings.title]</h2>
   </div>
   <div class="content cap-bottom">
       <div class="tab-container">
           <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr class="dtt_header_row">
                   {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}
                   <td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">
                       <table class="list" role="grid">
                           <thead>
                               <tr>
                                   <th class="dtt_sidebar_title">$[plugin.settings.sidebar_title]</th>
                               </tr>
                           </thead>
                       </table>
                   </td>
                   <td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>
                   {/if}{/if}
                   <td valign="top">
                       <table class="list" role="grid">
                           <thead>
                               <tr class="dtt_tabs">
                                   {foreach $[plugin.settings.tabs]}
                                   <th class="board item clickable" data-tab="tab-$[loop.index]" onclick="dtt.toggleTab($(this));">$[plugin.settings.tabs.tab_title]</th>
                                   {/foreach}
                               </tr>
                           </thead>
                       </table>
                   </td>
                   {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}
                   <td rowspan="2" class="dtt_sidebar_border border-round" style="width: 0px;"></td>
                   <td class="dtt_hidden_sidebar_title_cell" valign="top" style="width: $[plugin.settings.sidebar_width]%;">
                       <table class="list" role="grid">
                           <thead>
                               <tr>
                                   <th class="dtt_sidebar_title last">
                                       $[plugin.settings.sidebar_title]
                                   </th>
                               </tr>
                           </thead>
                       </table>
                   </td>
                   {/if}{/if}
               </tr>
               <tr class="dtt_content_row">
                   {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'right'}
                   <td class="dtt_hidden_sidebar_content_cell" valign="top">
                       <table class="list" role="grid">
                           <tbody>
                               <tr>
                                   <td class="dtt_sidebar_content">
                                       $[plugin.settings.sidebar_content]
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </td>
                   {/if}{/if}
                   <td valign="top">
                       <div class="tab-content">
                           {foreach $[plugin.settings.tabs]}
                           <div id="tab-$[loop.index]" class="tab-pane">
                               $[plugin.settings.tabs.content]
                           </div>
                           {/foreach}
                       </div>
                   </td>
                   {if $[plugin.settings.enable_sidebar] == '1'}{if $[plugin.settings.sidebar_location] != 'left'}
                   <td class="dtt_hidden_sidebar_content_cell" valign="top">
                       <table class="list" role="grid">
                           <tbody>
                               <tr>
                                   <td class="dtt_sidebar_content last">
                                       $[plugin.settings.sidebar_content]
                                   </td>
                               </tr>
                           </tbody>
                       </table>
                   </td>
                   {/if}{/if}
               </tr>
           </table>
       </div>
   </div>
</div>

CSS:
.tab-container {
   display: flex;
   flex-direction: row;
}

.tab-container .dtt_tabs {
   display: flex;
   flex-direction: row;
}

.tab-container .dtt_tabs .board.item {
   flex: 1;
   text-align: center;
}

.tab-container .tab-content {
   flex: 1;
}

.tab-container .tab-pane {
   display: none;
}

.tab-container .tab-pane:first-child {
   display: block;
}

I wrapped the entire tabbed section in a div with the class tab-container to create a flex container. Within the tab container, I set the flex-direction to row, which will make the tabs and tab content appear side by side. This did what I wanted but it has not removed the images that should show below. I am 1000% not great at coding so I have no idea what I did wrong to cause this to mess up. Any help would be greatly appreciated.

[Kitty Katt]

You can find the support thread here: support.proboards.com/thread/430638/dynamically-tabbed-table

I will tag the plugin author, Jordan, so you do not need to make another post there.

[clemie]

Thank you! I'm surprised it didn't pull up for me when searching. I see the creator hasn't been on in a few months so I will search the thread for an answer