Essential grid in Accordion

Support
#1

Hi,

I’m trying to use multiple Essential Grids in some accordions but as you probably know, they are not showing properly until the windows is refreshed / resized.

For using Essential Grids in X Tabs, you provided the following solution, which works perfectly:

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

Do you have a same solution that works in accordions? Would be very helpfull.

Thank you

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Hi,

Sure.

See private note below.

Thank you for a working solution!

#4

Hi There,

Unfortunately, the accordion was not created with the intention to support this type of content.

While the accordion is closed the javascript of the grid does not work as it would normally do and that is way the grid does not work as you would expect.

I would recommend you have a different approach to the layout.

Thanks for understanding

#5

Hi there,

But isn’t this the same behaviour as with the Tab element? With only one tab visible at any moment, the javascript of the other tabs does not work and you get the same result as with the accordion.

But the CSS code i mentioned above in this thread fixed this for the Tab element. So there could be an equivalent solution for the accordion element, or am i wrong?

Thank you

#6

Hi there,

Following the same rule of the CSS code, you have provided I tried to implement the same logic on the Accordion tab. I think I succeeded to do the trick but I’m not sure if it will work on all cases.

Would you please kindly add the CSS code below to Pro > Launch > Theme Options > CSS:

.x-accordion-body.collapse:not(.in) {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}

Thank you.

#7

Hi,

Your css code worked perfect! Thank you!!!

#8

Glad to hear it.

Cheers

#9

@Joao @christopher.amirian - I’m having this issue on Theme X Pro. What would be the css snippet to achieve this in Theme X Pro?

Here’s what I tried with no luck:

.x-acc-content.collapse:not(.in) {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}

#10

Hi @frankburder

I deleted your information provided in the secure note. You should only provide them in your own thread for security purposes.

Please start a new thread about this issue and provide more information. For the meantime, please try this

[data-x-toggle-collapse].x-collapsed {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}

Thanks!

1 Like
#11

That did the trick!!

THANK YOU. I could not figure this out…

#12

Glad to hear it :slight_smile:

#13

Question - how do I resolve this same issue on the tabbed content element in Theme X Pro?

#14

Hello Frank,

Please don’t mind but this is a post although similar is started by a different user and is fairly old ticket. Posting on someone else thread create lot of confusion and slows down the response time. Faster response we encourage users to create a new ticket. In that regards I request you to please create a new ticket and someone from support team will take a look. For more details please take a look at our support handbook.

Thanks.

#15

Hi @cleverdesing, did you figure out how to combine tabs and essential grids?

#16

Hi @Icicleta,

This was an old thread which was probably only applicable for classic ones. Please start a new thread about the issue and we’ll check it there. And make sure to provide the site’s URL on that thread.

Thanks!