FANDOM


  • There's a small mistake on the module and template that was built by wiki programmer staff. And it seems they don't care anymore / don't want to fix it

    The results it's broken and simply not showing (hidden) in mobile view, making it sucks for mobile-user experiences. I think some of us have noticed about it Here's the example question, issue, and complaint: Thread:1237992 

    I know there's a PortableNavbox... But that's just a css-edited version of infobox, making it's width 100% and can't do advanced table grouping, subgrouping, lists... I'm sure many wikis still using the broken Navbox because they want the "advanced table" for storing their data.

    I made a template, custom navbox with advanced table, that works well for mobile view experiences...

    I took example from here https://templatesandbox.fandom.com/wiki/Navbox_advanced But I don't want to do it like these

    <table>
       <tr>
           <td>
           </td>
       </tr>
    <table> 
    

    And instead I modify it to be like this

    {|
     |-
     |Text here
     |-
    |}
    

    This is the table idea

    <!--start outer table-->
    {|{{#if:{{{nocollapse|}}}||class="mw-collapsible mw-collapsed" data-expandtext="open" data-collapsetext="close"}} style="width:100%; {{{basestyle}}}"
    {{!}}-
    {{!}}colspan="3" {{#if:{{{title_bg|}}}| bgcolor={{{title_bg}}} |class="color1"}} style="background-color:#8B0000; {{Gradient|#B22222|#8B0000}}; border:4px solid black; color:{{{title_color|}}}; font-size:15px; text-align:center;" | '''{{{title}}}''' 
    {{!}}-
    !colspan="3" style="border:4px double;"|<div style="height:200px; overflow:auto;">
    <!--start nested table-->
    {| border="1" cellpadding="2" cellspacing="2" style="float: center; font-size:90%; width:100%; text-align:center;" 
    {{!}}-
    <!--CREATE 1ST ROW FOR HEADING-->
    {{#if:{{{rowhead0|<noinclude>-</noinclude>}}}|
    {{!}}-
    {{!}}style="{{{rowheadstyle}}}" colspan="{{{colspanrowhead}}}"  {{!}} '''{{{rowhead0}}}'''
    {{!}}-}}
    
    <!--CREATE GROUP1-->
    {{#if:{{{group1|<noinclude>-</noinclude>}}}|
    {{!}}-
    {{!}}style="{{{groupstyle}}}" rowspan="{{ #expr:1{{#if:{{{list1.2|<noinclude>-</noinclude>}}}|+1}} }}" <!--+++need loop to create more list--> {{!}}'''{{{group1}}}'''
    
    {{#if:{{{subgroup1.1|<noinclude>-</noinclude>}}}| 
    {{!}}style="{{{subgroupstyle}}}"{{!}} '''{{{subgroup1.1}}}''' |}}
    {{!}}style="{{{liststyle}}}" colspan={{{colspanlist}}} {{!}} '''{{{list1.1}}}'''
    {{!}}-
    
    <!-- NEED TO LOOP LIST AS MUCH AS NEEDED-->
    {{#if:{{{list1.2|<noinclude>-</noinclude>}}}|
    {{!}}-
    {{#if:{{{subgroup1.2|<noinclude>-</noinclude>}}}| 
    {{!}}style="{{{subgroupstyle}}}"{{!}} '''{{{subgroup1.2}}}''' |}}
    {{!}}style="{{{liststyle}}}"  colspan={{{colspanlist}}} {{!}} '''{{{list1.2}}}'''
    {{!}}-}}
    }}<!-- END GROUP1-->
    
    <!--**GENERATE NEXT GROUP 2, 3, 4, 5, 6, etc, ++++ -->
    
    {{#if:{{{rowheadjojo|<noinclude>-</noinclude>}}}|<!--row below-->
    {{!}}-
    {{!}}style="{{{rowheadstyle}}}" colspan="{{{colspanrowhead}}}" {{!}} '''{{{rowheadjojo}}}'''
    {{!}}-}}
    
    |}<!--End Nested Table-->
    </div><!--END Scroll-->
    |}<!--End Outer Table-->
    

    RESULT HERE: https://towerofgod.fandom.com/wiki/Template:PortableNavbox

    it's kinda sucks because I have to do some crazy 5000 lines repeated coding or if I want to add more group and list, I have to manually repeat more. I KNOW IT'S INEFFICIENT and STUPID. But I don't know how to javascript it... But it's still worked anyway LOL

    Can somebody help to create the javascript? This might also help many wiki FANDOM for their broken navbox

      Loading editor
    • I think you want Lua/Scribunto and not Javascript.

      Either way, this question is better asked at the Script Suggestions board or Scribunto Help board on the Dev wiki.

        Loading editor
    • Also:

      1. A link to the non-working template would help if you actually want someone to try to fix it.
      2. Custom JS and CSS are not applied in mobile view regardless. So if your solution relies on either (or both), it will never be able to work under the current arrangement.
        Loading editor
    • Whether you use CSS or Lua, it is still a rigid table that just narrows to fit the mobile width? Using w:c:towerofgod:Template:Zahard_Empire as an example is bottom left in image below.

      I recommend that you use Fandyllic's row template system

      • You just add rows to the navbox as needed avoiding "having to do some crazy 5000 lines repeated coding"
      • As it is a cell inside a table, in mobile the navbox will just float down into a single column (bottom right in image below)

      My navbox below is missing some of your styling like borders, but gives you an idea how it works

      Zahard Empire navbox
        Loading editor
    • TableWiz wrote:
      Whether you use CSS or Lua, it is still a rigid table that just narrows to fit the mobile width? Using w:c:towerofgod:Template:Zahard_Empire as an example is bottom left in image below.

      I recommend that you use Fandyllic's row template system

      • You just add rows to the navbox as needed avoiding "having to do some crazy 5000 lines repeated coding"
      • As it is a cell inside a table, in mobile the navbox will just float down into a single column (bottom right in image below)

      My navbox below is missing some of your styling like borders, but gives you an idea how it works

      Zahard Empire navbox

      Ohh this one seems way more efficient. But I'm a little lost since I wasn't an expert in table things. And fandyllic Rowtemplate system have different structure. Could you give the code example please?? I have tried it but I'm confused that the table always ended up having 2-3 columns

        Loading editor
    • Does this issue need more help or has it been resolved by now?

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.