Canvas Support

Alternate style Tab display issue

6 replies · opened Sep 14, 2016

Jjasonfan1203Sep 14, 2016

Hello,

I'm using the alternate style tab to display information. I have 2 tabs both contains html elements. When the 1st tab is active, the elements in the 2nd tab is not shown despite clicking on it. However, if I shrink the browser size or open up developer console, the element is shown in the 2nd tab, but hides the element in the 1st tab. Please see attach screen shots.

I'm using this code

.tabs.tabs-alt.clearfix
   ul.tab-nav.clearfix
          li
            a(href='#tab-my-programs') My Programs
          li
            a(href='#tab-wishlist') Wishlist
SSemicolon WebSTAFFSep 16, 2016

Hello,

This issue is easily fixable. Can you please provide us with the Codes you are trying to use in the Tab Content area so that we can provide you with the Solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Jjasonfan1203Sep 20, 2016

#tabs-profile.tabs.tabs-alt.clearfix
ul.tab-nav.clearfix
li
a(href='#tab-my-programs') My Programs
li
a(href='#tab-wishlist') Wishlist

    // Function picker end
    //
      Program Items 3-per-row
      =============================================
    .tab-container
      #tab-my-programs.tab-content.clearfix
            .portfolio.grid-container.portfolio-3.clearfix
                article.portfolio-item.pf-strength
                  .feature-box.center.media-box.fbox-bg.programitem-hover
                    a(href='#')
                      .fbox-media
                        img.image_fade(src='#', alt='Featured Box Image')
                      .fbox-desc.program-padding
                        h3.programitem-title title
                        a(href='#')
                          h3.programitem-title(style='padding-top: 10px; color: #999;') By someone
      #tab-wishlist.tab-content.clearfix
          .portfolio.grid-container.portfolio-3.clearfix
              article.portfolio-item.pf-strength
                .feature-box.center.media-box.fbox-bg.programitem-hover
                  .fbox-media
                    a(href='#')
                      img.image_fade(src='#', alt='Featured Box Image')
                  .fbox-desc.program-padding-btn
                    h3.programitem-title title
                    a(href='#')
                      h3.programitem-title(style='padding-top: 10px; color: #999;') By someone
Jjasonfan1203Sep 20, 2016

Sorry about the format. Here it is in code block

#tabs-profile.tabs.tabs-alt.clearfix
        ul.tab-nav.clearfix
          li
            a(href='#tab-my-programs') My Programs
          li
            a(href='#tab-wishlist') Wishlist
          
        // Function picker end
        //
          Program Items 3-per-row
          =============================================
        .tab-container
          #tab-my-programs.tab-content.clearfix
                .portfolio.grid-container.portfolio-3.clearfix
                    article.portfolio-item.pf-strength
                      .feature-box.center.media-box.fbox-bg.programitem-hover
                        a(href='#')
                          .fbox-media
                            img.image_fade(src='#', alt='Featured Box Image')
                          .fbox-desc.program-padding
                            h3.programitem-title title
          #tab-wishlist.tab-content.clearfix
              .portfolio.grid-container.portfolio-3.clearfix
                  article.portfolio-item.pf-strength
                    .feature-box.center.media-box.fbox-bg.programitem-hover
                      .fbox-media
                        a(href='#')
                          img.image_fade(src='#', alt='Featured Box Image')
                      .fbox-desc.program-padding-btn
                        h3.programitem-title #{item.title}
SSemicolon WebSTAFFSep 20, 2016

Hello,

Thanks for the Code! Please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking: 


	jQuery( '.tabs' ).on( 'tabsactivate', function( event, ui ) {
		jQuery( '.grid-container' ).isotope('layout');
	});

This should definitely fix your issue. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Jjasonfan1203Sep 21, 2016

Hello,

It does fix the display issue, but every tab click causes the element to slide down in an animated fashion which is not desirable. May I ask why this is and if there's a workaround to it?

Thanks.

SSemicolon WebSTAFFSep 22, 2016

Hello,

It would be great if you can please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard