Menu icon Foundation
Show/hide for large on Gmail/Inbox

Hello, I want to use hide/show-for-large to display rows of my emails.

 

**How can we reproduce this bug?**

 

Tested code sample:

````

<row class="show-for-large">

    <columns>

        <p>SHOW FOR LARGE</p>

    </columns>

</row>

<row class="hide-for-large">

    <columns>

        <p>HIDE FOR LARGE</p>

    </columns>

</row>

````

 

**What did you expect to happen?**

 

Rows with "class='hide-for-large'" only appears on mobile.

Rows with "class='show-for-large'" only appears on desktop.

 

Everything else, including responsiveness, works very well.

 

**What happened instead?**

 

Rows with "class='hide-for-large'" never appears.

Rows with "class='show-for-large'" always appears.

 

 

Generated and inlined code from gmail source: 

 

````

<table class="row show-for-large" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

   <tbody>

      <tr style="padding:0;text-align:left;vertical-align:top">

         <th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:16px;text-align:left;width:684px">

            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

               <tr style="padding:0;text-align:left;vertical-align:top">

                  <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">

                     <p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left">SHOW FOR LARGE</p>

                  </th>

                  <th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

               </tr>

            </table>

         </th>

      </tr>

   </tbody>

</table>

<table class="row hide-for-large" style="border-collapse:collapse;border-spacing:0;display:none!important;font-size:0;line-height:0;max-height:0;mso-hide:all;overflow:hidden;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

   <tbody>

      <tr style="padding:0;text-align:left;vertical-align:top">

         <th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:16px;text-align:left;width:684px">

            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

               <tr style="padding:0;text-align:left;vertical-align:top">

                  <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">

                     <p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left">HIDE FOR LARGE</p>

                  </th>

                  <th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

               </tr>

            </table>

         </th>

      </tr>

   </tbody>

</table>

````

 

**What email clients does this happen in?**

 

Gmail and Inbox for iOS on an iPhone5C, Gmail and Inbox web. Haven't tested on other clients.

Since the iPhone has a 640px width I've played a bit with media queries breakpoints but I always got the same behavior.

Fondation for email 2.2.1 Sass.

emailgmailResponsive

Hello, I want to use hide/show-for-large to display rows of my emails.

 

**How can we reproduce this bug?**

 

Tested code sample:

````

<row class="show-for-large">

    <columns>

        <p>SHOW FOR LARGE</p>

    </columns>

</row>

<row class="hide-for-large">

    <columns>

        <p>HIDE FOR LARGE</p>

    </columns>

</row>

````

 

**What did you expect to happen?**

 

Rows with "class='hide-for-large'" only appears on mobile.

Rows with "class='show-for-large'" only appears on desktop.

 

Everything else, including responsiveness, works very well.

 

**What happened instead?**

 

Rows with "class='hide-for-large'" never appears.

Rows with "class='show-for-large'" always appears.

 

 

Generated and inlined code from gmail source: 

 

````

<table class="row show-for-large" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

   <tbody>

      <tr style="padding:0;text-align:left;vertical-align:top">

         <th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:16px;text-align:left;width:684px">

            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

               <tr style="padding:0;text-align:left;vertical-align:top">

                  <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">

                     <p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left">SHOW FOR LARGE</p>

                  </th>

                  <th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

               </tr>

            </table>

         </th>

      </tr>

   </tbody>

</table>

<table class="row hide-for-large" style="border-collapse:collapse;border-spacing:0;display:none!important;font-size:0;line-height:0;max-height:0;mso-hide:all;overflow:hidden;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">

   <tbody>

      <tr style="padding:0;text-align:left;vertical-align:top">

         <th class="small-12 large-12 columns first last" style="Margin:0 auto;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:16px;padding-right:16px;text-align:left;width:684px">

            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">

               <tr style="padding:0;text-align:left;vertical-align:top">

                  <th style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">

                     <p style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left">HIDE FOR LARGE</p>

                  </th>

                  <th class="expander" style="Margin:0;color:#0a0a0a;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0!important;text-align:left;visibility:hidden;width:0"></th>

               </tr>

            </table>

         </th>

      </tr>

   </tbody>

</table>

````

 

**What email clients does this happen in?**

 

Gmail and Inbox for iOS on an iPhone5C, Gmail and Inbox web. Haven't tested on other clients.

Since the iPhone has a 640px width I've played a bit with media queries breakpoints but I always got the same behavior.

Fondation for email 2.2.1 Sass.

Rafi Benkual over 2 years ago

I think this was fixed on the mater branch. Here is the code I'm using

//reimplementation of show-for-small because released version has a bug in it
.show-for-small {
  display: none;
  mso-hide: all; // hide selected elements in Outlook 2007-2013
  overflow: hidden;
  max-height: 0;
  font-size: 0;
  width: 0;
  line-height: 0;

  @media only screen and (max-width: #{$global-breakpoint}) {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    max-height: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

table.body table.container .show-for-small * {
  mso-hide: all; // hide selected elements in Outlook 2007-2013
}

table.body table.container .show-for-small,
table.body table.container .row.show-for-small {
  @media only screen and (max-width: #{$global-breakpoint}) {
    display: table !important;
    width: 100% !important;
  }
}

Vincenzo Coppolecchia over 1 year ago

This literally saved my ass today, thanks a lot @Rafi!