1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to hide a table column below a certain width?

Discussion in 'XenForo Development Discussions' started by 0ptima, Oct 9, 2015.

  1. 0ptima

    0ptima Well-Known Member

    I would like to hide certain columns in a table that my addon uses when the browser width is below X pixels but dont how to do it. Can I use template conditions or is there a better way? Thanks.

    Here is my template.


    Code:
    <div class="dataTableWrapper">
        <table class="dataTable">
            <col style="width: 1%" />
            <thead>
                <tr class="dataRow">
                    <th></th>
                    <th>{xen:phrase timeslips_member}</th>
                    <th class="tshide">{xen:phrase timeslips_vehicle}</th>
                    <th>{xen:phrase timeslips_induction}</th>
                    <th>{xen:phrase timeslips_WHP}</th>
                    <th>{xen:phrase timeslips_torque}</th>
                    <th>{xen:phrase timeslips_dyno}</th>
                </tr>
            </thead>
    
    <xen:foreach loop="$dynos" value="$dyno">
            <tr class="dataRow">
                <td>#</td>
                <td ><xen:username user="$dyno" /></td>
                <td class="tshide" ><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
                <td>{$dyno.ts_induction}</td>
                <td>{$dyno.ts_WHP}</td>
                <td>{$dyno.ts_torque}</td>
                <td> {$dyno.ts_dyno}</td>
                </tr>
    
            </xen:foreach>
    
            </tbody>
        </table>
    </div>
    
     
  2. Cyb3r

    Cyb3r Well-Known Member


    The only way I'm aware of is CSS media method, if you have a class assigned to that table then use this:
    Code:
    @media (max-width: 480px) {
        .yourClass {
            display: none;
        }
    }
    Change 480px to your max-width, or you can use xenforo preset responsive width by using the style properties variables like this:
    Code:
    @media (max-width: @maxResponsiveMediumWidth) {
        .yourClass {
            display: none;
        }
    }
    You might have noticed already the property name @maxResponsiveMediumWidth this means the medium width setup in the style properties you can change it from Appearance > Style Properties > Responsive Design.
     
  3. 0ptima

    0ptima Well-Known Member

    Thansk @Cyb3r . Im using the XF table code, so it already has class names. Would I have to add a class name on the <th> and <td> of the column I want to hide? In this case I want to hide the "torque" column

    So would I do something like <th class="hideTorque"> and <td class="hideTorque">

    and then add the following CSS?

    Code:
    @media (max-width: @maxResponsiveMediumWidth) {
        .hideTorque {
            display: none;
        }
    }

    upload_2015-10-9_9-4-9.png
     
  4. James

    James Well-Known Member

    You'd have to identify the particular columns with a class, yeah.
     
    0ptima likes this.
  5. 0ptima

    0ptima Well-Known Member

    Thanks guys! Got it to work!

    Here is my template
    Code:
    <div class="dataTableWrapper">
        <table class="dataTable">
            <col style="width: 1%" />
            <thead>
                <tr class="dataRow">
                    <th class="tsHide"></th>
                    <th>{xen:phrase timeslips_member}</th>
                    <th class="tshide">{xen:phrase timeslips_vehicle}</th>
                    <th>{xen:phrase timeslips_induction}</th>
                    <th>{xen:phrase timeslips_WHP}</th>
                    <th>{xen:phrase timeslips_torque}</th>
                    <th class="tsHide">{xen:phrase timeslips_dyno}</th>
                </tr>
            </thead>
    
    <xen:foreach loop="$dynos" value="$dyno">
            <tr class="dataRow">
                <td class="tsHide" >#</td>
                <td ><xen:username user="$dyno" /></td>
                <td><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
                <td>{$dyno.ts_induction}</td>
                <td>{$dyno.ts_WHP}</td>
                <td>{$dyno.ts_torque}</td>
                <td class="tsHide"> {$dyno.ts_dyno}</td>
                </tr>
    
            </xen:foreach>
    
            </tbody>
        </table>
    </div>
    In EXTRA.css I added the following

    Code:
    @media (max-width: @maxResponsiveMediumWidth) {
       .dataTable tr.dataRow td.tsHide{
            display: none;
        }
    }
    
    @media (max-width: @maxResponsiveMediumWidth) {
       .dataTable tr.dataRow th.tsHide{
        display: none;
        }
    }   
    
     
  6. Cyb3r

    Cyb3r Well-Known Member

    You can add them both in one @media block, no need to create block for every class, and better you can apply the same CSS to all wanted classes by adding them together separated by comma:

    Code:
    @media (max-width: @maxResponsiveMediumWidth) {
       .dataTable tr.dataRow td.tsHide,
       .dataTable tr.dataRow th.tsHide
       {
            display: none;
       }
    }
     
    0ptima likes this.
  7. 0ptima

    0ptima Well-Known Member

    Thanks for the additional info! (y):)
     
  8. 0ptima

    0ptima Well-Known Member

    I have my template setup to show 4 columns when the width is less than @maxResponsiveNarrowWidth

    CSS
    Code:
    <xen:if is="@enableResponsive">
    @media (max-width: @maxResponsiveNarrowWidth) {
       .dataTable tr.dataRow th.tsHide,
        .dataTable tr.dataRow td.tsHide
        {
        display: none;
        }
    }   
    </xen:if>
    
    Template
    Code:
    <div class="dataTableWrapper">
    <table class="dataTable">
            <col style="width: 1%" />
            <thead>
                <tr class="dataRow">
                    <th class="tsHide"></th>
                    <th class="tsHide">{xen:phrase timeslips_member}</th>
                    <th >{xen:phrase timeslips_vehicle}</th>
                    <th>{xen:phrase timeslips_induction}</th>
                    <th>{xen:phrase timeslips_WHP}</th>
                    <th>{xen:phrase timeslips_torque}</a></th>
                    <th class="tsHide">{xen:phrase timeslips_dyno}</th>
                </tr>
            </thead>
            <tbody>
    <xen:foreach loop="$dynos" value="$dyno">
            <tr class="dataRow">
                <td class="tsHide"><img src="{xen:helper avatar, $user, s}" alt="" class="listAvatar" /></td>
                <td class="tsHide"><xen:username user="$dyno" /></td>
                <td><a href="{xen:link showcase, $dyno}">{xen:jsescape {xen:raw $dyno.item_name}, single}</a></td>
                <td>{$dyno.ts_induction}</td>
                <td>{$dyno.ts_WHP}</td>
                <td>{$dyno.ts_torque}</td>
                <td class="tsHide">{$dyno.ts_dyno}</td>
                </tr>
    
            </xen:foreach>
    
            </tbody>
        </table>
    </div>
    
    How can I show a 5th column when the width is between @maxResponsiveNarrowWidth and @maxResponsiveMediumWidth ?
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    Hide it at the wide width.
     
    0ptima likes this.

Share This Page