Post Grid/Shortcodes not displaying properly in tabs and other instances

Greetings! I am having issues displaying shortcodes (Post Grid in partiular) in tabs (Screenshot 1). Sometimes (rarely) they will display correctly, but most of the time the ones that don't display right display stacked and cut off.

The same shortcode (Post Grid) is also not displaying all of the time in some instances (for example Screenshot 2 on http://tamanasprings.com/all-products/category/seeds/). The shortcode will display the actual post items yet sometimes will only display the filter at the top.

I have also mentioned this to the plugin's developer, however I haven't heard back from them. I'm hoping that I could get some clarity and possible assistance here!

Much Love
Ciro Bey

    Luís

    Hi @ciroabey,

    Hope you're doing well today!

    It's a weird issue, because it seems to work well in other tabs, but in the tab you showed in the screenshot it have some issues.

    Regarding to the Screenshot 2 (http://tamanasprings.com/all-products/category/seeds/) I checked your website and seems you are not using the shortcode referred.

    Can you add it so I can check it?

    Cheers, Luís

    Ciro Bey

    Greetings Luís The shortcode is there, I just mixed up the screenshots. My apologies.

    This time it is displaying correctly, but doesn't always display (screenshot 1). Screenshot 2 displays the Upfront side of things.

    It's a weird issue, because it seems to work well in other tabs, but in the tab you showed in the screenshot it have some issues.

    Yes, I'm not sure why it does that. The "Grounding Ware" set of tabs (jewelry and clothing) had done the same thing at first if I can recall. After adding the shortcode again, it seems to have been fixed. However that is not the case with the other tab elements ("Organic Seeds").

    Hope you can help to figure this one out!

    Much Love
    Ciro Bey

    *To Add to the rest of this post*
    I noticed that the shortcodes in the tabs elements are having an issue when only switching tabs. I had the second tab open and the shortcode worked fine, but the others didn't. When the first one is open the others don't work.

    Also, the shortcode on the other page mentioned before (not in a tab element) hadn't displayed again. However, when I tried the same page in an incognito window, it displayed normal.

    Luís

    Hi @ciroabey,

    Hope you're doing well today!

    Firstly, sorry for my late reply and all the problems it may have caused.

    Honestly, I checked all the settings, comparing with your other tab (Grounding Ware) and I was unable to understand why it don't have the same behaviour.

    I am not totally sure, but seems to be an issue of Post Grid and not from Upfront. I think Post Grid uses JS to calculating positions and to add inline CSS, what is causing that disorder.

    I am not seeing other option besides of using custom CSS to correct the positions of the child elements (items). I wrote a Custom CSS code to correct all the items positions, if you are interested:

    #post-grid-9341 .grid-items, #post-grid-9342 .grid-items, #post-grid-9343 .grid-items, #post-grid-9344 .grid-items, #post-grid-9345 .grid-items{
      position: relative;
      width: 1008px !important;
      height: 226px !important;
    }
    
    #post-grid-9341 .grid-items .item:nth-child(1), #post-grid-9342 .grid-items .item:nth-child(1), #post-grid-9343 .grid-items .item:nth-child(1), #post-grid-9344 .grid-items .item:nth-child(1), #post-grid-9345 .grid-items .item:nth-child(1){
      left: 0;
    }
    
    #post-grid-9341 .grid-items .item:nth-child(2), #post-grid-9342 .grid-items .item:nth-child(2), #post-grid-9343 .grid-items .item:nth-child(2), #post-grid-9344 .grid-items .item:nth-child(2), #post-grid-9345 .grid-items .item:nth-child(2){
      left: 336px !important;
      top: 0 !important;
    }
    
    #post-grid-9341 .grid-items .item:nth-child(3), #post-grid-9342 .grid-items .item:nth-child(3), #post-grid-9343 .grid-items .item:nth-child(3), #post-grid-9344 .grid-items .item:nth-child(3), #post-grid-9345 .grid-items .item:nth-child(3){
      left: 672px !important;
      top: 0 !important;
    }

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

    Ciro Bey

    Greetings Luís no worries here.

    After some more testing just now, I noticed that the shortcodes in the "grounding ware" tab element worked in any tab element. So I found that the ones recently added in the "organic seeds" tab element had Masonary style enabled which is why they the positioning wasn't aligning horizontally. They work now!

    I noticed similar issues with CHPC Slider in tabs elements as well. The first shortcode in the first tab displays great. However in the other tabs, the posts don't display. Only the navigation arrows on the sides of the slider display (on hover). You can see this in the 2nd Screenshot. The 1st Screenshot shows the first tab displaying the shortcode fine.

    Is this similar to the JS conflict you mentioned earlier, or is something else the matter here?

    Thank you for all of your help thus far with figuring out the issue with Post Grid. At first I had thought the Post Grid Issue and the CHPC Slider issue were one in the same or similar due to the fact both issues reside in the tabs element. So I can here to see if this was on Spirit's end. Not sure if CHPC Slider is the problem here or not, hope you can help!

    Much Love
    Ciro Bey

    Luís

    Hi @ciroabey,

    Hope you're doing well today!

    I am glad you have found the issue. Honestly, I compared both settings and I was unable to find it.

    Regarding to CHPC Slider, I think it don't play well with Upfront. Can be some JS conflict.

    We can force the settings of the slider using CSS, but the 2º tab slider doesn't play well, we are unable to horizontal scroll the elements. I think is a JS conflict that I was unable to overcome.

    Try the CSS code below to display the slider in the 2º tab and see the issue that I am talking about:

    .utab-content-active .caroufredsel_wrapper {width: 1020px !important; height: 342px !important; display: block}
    
    .utab-content-active .caroufredsel_wrapper ul li{width: 331px !important}
    
    .utab-content-active .caroufredsel_wrapper ul{width: 3773px !important; height: 342px !important;}

    Cheers, Luís