[jsn789Participant]

Hello,

I have an issue with the following page:
http://f7f.ba9.myftpupload.com/%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8/%D0%B7%D0%BD%D0%B0%D1%86%D0%B8/

I am using a raw element on cornerstone, in which I have modified X-Tabs so there are 10 tabs listed, floating on the left of the content area. Inside the content area of each tab I have a different grid (from The Grid).

The problem I am facing is that, once I click through the tabs, the grid (from The Grid) in the content area does not show. There is some kind of a bug where it only shows once I re-size the browser window a bit (screenshot attached to visualise that).

Would you please assist me with fixing this bug?

Thank you in advance!

P.S. I will leave the login details of the site in a private post.

Regards,
Yasen

[jsn789Participant]

This reply has been marked as private.

[Paul RModerator]

Hi Yasen,

Adding Grid or any other element that uses JavaScript to initialize in tabs or accordions is not a good choice as closed tabs are set to be hidden and thus any element inside it doesn’t initialize properly when the site is first loaded. Some elements like Grid has functionality to re-adjust their size when browser window is resized.

At this time, you can try adding this CSS code under Custom > CSS in the Customizer to avoid this behaviour:

.x-tab-content>.x-tab-pane:not(.active) {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}

Thank you!

[jsn789Participant]

Hey Paul,

Thank you for your suggestion it does work, although with a simple bug – screenshot attached to display it.
Is there any fix for that?

Also as you mentioned using the method I choose – to put grids inside the tabs element is not a suggested practice, can you suggest other alternatives so I can achieve similar structure?

Looking forward hearing back from you.

Thanks,

Yasen

[LelyModerator]

Hi Yasen,

I can’t see the issue on your screenshot. See this:http://screencast-o-matic.com/watch/cbeUew6KKF

The GRID is best added just inside the column or you can try block grid element:http://demo.theme.co/integrity-1/shortcodes/block-grid/

Hope this helps.

[jsn789Participant]

Hey Lely,

Thank you for looking into my issue.

The problem is as I mentioned and tried to show with the screenshot when you go through the different tabs. The grids inside each tab are different and when you go from the first to the second tab, the grid inside the 2nd tab does not fit properly.

Can you please take a second look?

Thank you for your suggestion, but the block grid won’t be any useful in my case.

Looking forward hearing back!

Regards,
Yasen

[jsn789Participant]

Hey there,

Feel free to close this thread.

I have figured out a way to accomplish what I wanted 🙂

Thank you for your time.

Regards,
Yasen

[Rue NelModerator]

Hello There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

[Author]

Posts