[Resolved] Toolset View's columns turning into rows within Elementor

[Author]

Posts

[mahmoodK-2]

Tell us what you are trying to do?
I want to insert a toolset view which has a 4 column grid into an Elementor page, but the column width keeps defaulting to 100%. I have toolset set to load bootstrap 3. Please help me figure out what the issue is, and if I can provide any other information.

Is there a similar example that we can see?

hidden link scroll down to the blog section to see the issue.

[Waqar]

Hi Mahmood,

Welcome to Toolset support and I'd be happy to assist.

This issue has been reported to the concerned team already. The grid loop styles are not properly carried over when a view is inserted on any page, other than where it was originally created.

I'm afraid, I don't have a time estimate to share at the moment, but I'll keep you updated with the progress through this ticket.

For now, a workaround can be to include the following custom CSS, in the view's "Custom CSS" field ( as shown in the attached screenshot ), to make sure that the view's results are shown in 4 columns on other pages too:

.js-wpv-loop-wrapper > .tb-grid {
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
    grid-auto-flow: row;
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[mahmoodK-2]

Hello Waqar,

Thank you for the clarification. Good to know that this issue is not from my end. I hope this issue will be fixed soon, do notify me when it is fixed. For now I will use the custom css you have given. I have just started using toolset recently so I wanted to clarify, will the custom css get applied only to this view or as a global setting for .js-wpv-loop-wrapper > .tb-grid ?

Also, you mentioned that this issue occurs when the view is inserted into any page other than the one it was originally created in. However, when I inserted the view into a different page using the gutenberg block editor, I don't have this issue. Please check out the instance of the same view on hidden link . The 4 column grid is preserved, even though the view was created elsewhere. I have no complaints that it works, just thought you might like to know.

Best,
Mahmood

[Waqar]

Hi Mahmood,

Thanks for writing back and sharing your observation.

Is it possible that you've clicked the button “Edit Original view” or “Edit Copy” after inserting the view on a different page and then saved the page?
( screenshot: hidden link )

My tests show that the grid styles are loaded correctly if any of those buttons is used on the new page.

regards,
Waqar

[mahmoodK-2]

Yes! I did click on "Edit original" after inserting it. I suppose it helps that the option appears in the Gutenberg Editor. The same options do not show up when I insert it into Elementor. However, your solution worked, with the custom CSS. So thank you so much for your help. Hope the issue is permanently resolved soon.

Best,
Mahmood

[Waqar]

Hi Mahmood,

I'd like to update you that the issue involving the grid loop styles when a view is inserted on any other page, has been fixed in the Toolset Blocks 1.3.3 / Views 3.3.3.

regards,
Waqar