Magento 2.2.2 catalog product list widget showing items incorrectly

[YuanXiong]

Preconditions

1. Magento version EE 2.2.2, PHP version 7.0.22
2. Have 6 product items in stock

Steps to reproduce

1. Log in to the store admin dashboard, go to Content->Pages
2. Edit the default home page template, insert a widget with type = Catalog Products List.
3. Save the page and refresh the cache.

Expected result

1. Showing 5 product items each row with the same width on large screen, 4 items each row on middle screen, 3 items each row on small screen, 2 items each row on mobile.

Actual result

1. Showing 4 product items each row on large screen, 3 items each row on middle screen, 2 items each row on small screen, only 1 item each row on mobile.
2. A blank area showing on the right side of each row
3. A margin on the left side of the 1st item of the 2nd row.
4. No margin on the left side of the 2nd item of the 2nd row.
5. While inspecting the code using Chrome, Firefox or Safari, we see 24 space characters between HTML tags </li> and the <li>
6. Still showing some space characters between </li> and <li> tags even if HTML minified

I have checked the template file located in
[Magento]/vendor/magento/module-catalog-widget/view/frontend/templates/product/widget/content/grid.phtml

This is the correct old version from Magento EE 2.1.0, line 45:
<?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="product-item">' : '</li><li class="product-item">' ?>

This is the new version from Magento EE 2.2, line 38~39
<?php if ($iterator++ != 1): ?></li><?php endif ?>
[24 space characters here]<li class="product-item">
Also, there are some space characters after <\li> on line 108:
[21 space characters here]<?php endforeach ?>

In browser, space characters between <li/> and <li>" will be rendered as a short blank area, about 3.1 pixel width depends on your theme font size and agent style. That's why the older store is showing items correctly but the upgraded is not.

In the magento default blank theme, the product items in the widget grid has this style:
@media (min-width: 1024px), print 7a6df6497c1fd2f…a138.min.css:1 .page-layout-1column .block.widget .products-grid .product-item:nth-child(5n+1) { margin-left: 0; } @media (min-width: 1024px), print 7a6df6497c1fd2f…a138.min.css:1 .page-layout-1column .block.widget .products-grid .product-item { margin-left: calc((100% - 5*(100%/6))/4); width: 16.66666667%; }
Which means on 1024px and wider screen, the 5n+1 items has no left margin, others have padding on the left. Each of them has width = 16.666667%.

With those space characters after each product item, there is not enough space for the last item to be rendered in the same row, so it will be moved to the next row.

To fix this problem, you have to remove all space characters in the html template file between </li> and <li> tags.
I removed the space characters before <li class="product-item"> on line 39 and before <?php endforeach ?> on line 108, save and refresh the page, it works!
To ugly fix this problem without touching the backend, the admin user can add custom style to the "block.widget .products-grid .product-item" class:
.block.widget .products-grid .product-item { margin-right: -3.1px }
If -3.1 px is not enough, add more.

However, I do not know if other Magento template files have the same issue. I am not an front-end expert but I know that there may be some other HTML tags have the same problem, like <ul>, <ol>.

[magento-engcom-team]

@YuanXiong, thank you for your report.
We've acknowledged the issue and added to our backlog.

[nfourteen]

@magento-engcom-team I was about to report this issue too and can confirm this occurs in Magento Open Source 2.2.2 as well.

I replaced the following lines in Magento\CatalogWidget\templates\product\widget\content\grid.phtml

38                      <?php if ($iterator++ != 1): ?></li><?php endif ?>
39                      <li class="product-item">

with:

38                      <?= /* @escapeNotVerified */ ($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>

This does fix the layout problem for the Magento\CatalogWidget\Block\Product\ProductsList widget for all media query breakpoints. Please let me know if you'd like me to submit a PR.

[magento-engcom-team]

Hi @GovindaSharma. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

• 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!

• 3. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

[GovindaSharma]

#MM19IN