[Resolved] tb-grid not working on Windows 10 | IE 11.0

[Author]

Posts

[davidI-6]

Hi guys,

I'm using 3 column grid (wordpress archive loop block) on a taxonomy template but the tb-grid class doesn't work on Edge. Shows each column 100% width instead of 33.3%

The grid works fine using the generic boostrap classes .row and .col-md-4

You can see it working OK with standard boostrap
hidden link (bottom of page)
or even the portfolio demo page:
hidden link

And not working with tb-grid tb-grid-column
hidden link

Not sure if it's a known issue but I couldn't find anything in the community support.

Can you help me solve this issue please?

Thanks in advance for your help

David

[Shane]

Hi David,

Thank you for getting in touch.

Actually the issue here is that this is using the Grid Layout CSS which doesn't have full compatibility with IE11 or earlier.

This is why the grid block isn't displaying with the columns in IE11 and earlier. This works fine in MS Edge but not in IE11

For a list of browser compatibility you can have a look at the link below.

hidden link

Please let me know if this helps.

Thanks,
Shane

[davidI-6]

Hi Shane,

Thanks for the info! You are correct, post grid does work on Edge and Edge legacy, the issue is with IE11 and older.

Unfortunately about 11% monthly traffic for this website will come from IE11 (see screenshot) so I need to use a compatible CSS :/

Can you help me redo the taxonomy template using Bootstrap instead of the default grid please?

Thanks in advance for your help

Kind Regards

David

[Shane]

Hi David,

Sure you're building this out as a view ? or as an archive?

What you can do is to go to the loop wizard of your view/archive and then set it up as a bootstrap grid.

Then from there you can specify the number of columns that you would want.

However before you do this I would like to know if this is a view or a custom archive. If you're able to provide me with a screenshot please let me know.

Thanks,
Shane

[davidI-6]

Hi Shane,

I'm using it on a WordPress Archive. WordPress archive output block seems to be by default.

I can't see a way to modify existing block to use Bootstrap grid. (see screenshot) and if I add a grid I can't find a way to add a loop
Do I need to create a new view? See previous ticket that you helped me with

https://toolset.com/forums/topic/taxonomy-template-3-column-grid/#post-1555853

Cheers

David

[Shane]

Hi David,

You will need to create the archive using the classic editor.

If its not enabled for archives go to Toolset -> Settings -> Archives and enable the classic editor.

Once you've done this then you should be able to create your archive using Bootstrap.

The instructions for the view would be similar to the archive.

Thanks,
Shane

[davidI-6]

Hi Shane,

1. I cant archives on settings
2. On WordPress archive I can't see document settings, when click on documents jumps to block
3. I can see the raw code switching the block to html but if I make any changes " I get the error "This block contains unexpected o invalid content" (see screenshot)

I've tried with WP Bakery plugin disabled and classic editor plugin was already disabled otherwise template can't be saved.

This is the raw code

<!-- wp:toolset-views/wpa-editor {"reduxStoreId":"views-editor-1585669869547","viewId":6405,"viewSlug":"product-categories","previewId":6407,"insertExisting":0,"wizardDone":true,"wizardStep":3} -->
<div class="wp-block-toolset-views-wpa-editor"><!-- wp:toolset-views/view-layout-block -->
<!-- wp:toolset-views/view-template-block {"storeId":"views-editor-1584720040245","style":{"cssClasses":[]}} -->
<div class="wp-block-toolset-views-view-template-block wpv-block-loop-item php-to-be-replaced-with-shortcode" data-toolset-views-view-template-block="1"><!-- wp:toolset/ct {"ct":"duplicate-loop-item-in-portfolio-three-column-grid-using-cards"} -->
<div class="wp-block-toolset-ct">[wpv-post-body view_template="duplicate-loop-item-in-portfolio-three-column-grid-using-cards"]</div>
<!-- /wp:toolset/ct --></div>
<!-- /wp:toolset-views/view-template-block -->
<!-- /wp:toolset-views/view-layout-block --></div>
<!-- /wp:toolset-views/wpa-editor -->

Do I need to replace the <div class="wp-block-toolset-views-view-template-block-loop-item"> ... with the loop container and everything inside? or just the row with the same code I have on view?

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="container wpv-loop js-wpv-loop">
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4">[wpv-post-body view_template="product-slider-slide"]</div>
[wpv-item index=other]
<div class="col-md-4">[wpv-post-body view_template="product-slider-slide"]</div>
[wpv-item index=3]
<div class="col-md-4">[wpv-post-body view_template="product-slider-slide"]</div>
</div>
[wpv-item index=pad]
<div class="col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-md-4"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[wpv-pager-nav-links output="bootstrap" links_type="dots"]
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Cheers

David

[Shane]

Hi David,

2. On WordPress archive I can't see document settings, when click on documents jumps to block

A. You will need to create a new archive and remove the old one. This is because you were creating the archive with solely the block editor before so it doesn't allow you to revert to the classic editor.

I would suggest deleting this and creating it over using the classic editor. You will still be able to use the block editor to display the content but you can use the loop wizard to setup your 4 column layout.

Please let me know if this is clear or if further clarification is needed.

Thanks,
Shane

[davidI-6]

Hi Shane,

I've tried to follow your instructions but I can't get the template to work with classic editor (no controls) only works with block editor and there are loop wizard block available
When I create a new template it automatically adds these blocks:
Archive
Archive Output
Wordpress Archive Loop
Pagination

I've tested with all plugins off in 2019 theme and tried to create the template from scratch and it doesn't work. Really stuck here :/

Can I ask you to login and you may try to paste add boostrap code correctly?

Cheers

David

[Shane]

Hi David,

Sure i've enabled the private fields for your next response.

Please also let me know the archive for this.

Thanks,
Shane

[Shane]

Hi David,

Thank you for getting in touch.

Have a look at this link below.
hidden link

Here is an example of how I did it.

Please let me know if this helps.

Thanks,
Shane

[davidI-6]

Hi Shane,

It works great, thanks for your help! Can you let me know how did you manage to get Toolset tools to work on WordPress Archives?

Cheers

David

[davidI-6]

Hi Shane,

Few things have stopped working since last changes

1. Add views Conditional buttons throws an error message on product item backend.
I use the tickbox field (see screenshot) as key for conditional test on related products view and also on the content template so the related products won't show if unticked. A not very elegant solution to avoid showing the title and no items found when no related products are added.

Here's the view
hidden link

and the specific code

[wpv-items-found][wpv-conditional if="( $(wpcf-related-products) eq '1' )"]

2. Repeatable group is not loading

3. Unable to use WP Bakery on content templates. If I change the selection, it changes back on refresh page.

I hope this helps you understand better what's going on.

Any questions let me know

Thanks

David

[Shane]

Hi David,

Happy I was able to help you out on this. Let me address a few of your concerns.

Can you let me know how did you manage to get Toolset tools to work on WordPress Archives?

Given that the Blocks grid uses the Grid Layout CSS which has compatibility issues with IE11, we can use bootstrap instead. To do this I had to go to Toolset -> Settings -> Editing Experience and select "Show both the legacy and Blocks interface and let me choose which to use for each item I build".

This would allow me to the option to enable the classic editor for wordpress archives below the Editing Experience settings.

From there I went to Toolset -> Custom Archives and created a new archive. I used the Loop Wizard to just add the post title to the archive so it would generate a content template for the archive.

Finally all I did was to select the Block editor for the content template on the archive and once i'm in the block editor screen I added back the content template for your previously created Archive.

Add views Conditional buttons throws an error message on product item backend.

I was able to see this issue Product post type. Could you try disabling the non-toolset plugins as there is an error being thrown in the console related to the wordpress tinyMCE editor.

2. Repeatable group is not loading

This seems to be related to the same issue with the tinyMCE editor. Once the plugins are disabled please let me know if you can see the items here as well.

3. Unable to use WP Bakery on content templates. If I change the selection, it changes back on refresh page.

I see that you are running an older version of the page builder could you update your wpBakery pagebuilder and let me know if the issue still remains ?

Thanks,
Shane

[davidI-6]

Hi Shane,

Thanks for the detailed reply!

Page builder issues
I've updated WP Bakery version to 6.1 (latest version) and that fixed the issue with page builder not showing on content templates but it still defaulting to classic editor when changing the setting on toolset settings. (This happens since changing editing experience to "Show both the legacy and Blocks interface" I've tried to revert to only legacy but still, nevertheless I can still use the page builder so not a big issue but you may flag that for debugging.

Repeatable group is not loading and conditional field not working
After debugging it seems that this function clashes with the latest version of All In One SEO (ver.3.4.2), I've rolled back to Ver. 3.3.5 and works OK.

See changelog hidden link

I can work with this version for now until you have a fix but let me know if you want to test yourself and see if you can replicate the issue or feel free to update AIO plugin again to force error. Site will be all yours until I hear back from you.

Cheers

David