Fixed grid issue on listing product

[gelanivishal]

Description (*)

Fixed grid column issue on v2.3

Fixed Issues (if relevant)

1. Category grid not rendered correctly #19312: Category grid not rendered correctly

Manual testing scenarios (*)

1. Create a category
2. Create > 5 products and assign them to this category
3. Open Category in Frontend

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• All automated tests passed successfully (all builds on Travis CI are green)

[magento-engcom-team]

Hi @gelanivishal. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

• @magento-engcom-team give me test instance - deploy test instance based on PR changes
• @magento-engcom-team give me 2.3-develop instance - deploy vanilla Magento instance

For more details, please, review the Magento Contributor Assistant documentation

[magento-engcom-team]

Hi @VladimirZaets, thank you for the review.
ENGCOM-3529 has been created to process this Pull Request

[VladimirZaets]

Hi @gelanivishal. Thanks for the collaboration. After manual testing we found next problems:

Problem: Incorrect product grid view on category page.
Manual testing scenario:

Create a category
Create > 5 products and assign them to this category
Open Category in Frontend
Incorrect product grid view on category page.

[gelanivishal]

@VladimirZaets Please give me screenshot.

[mfickers]

@magento-engcom-team give me 2.3-develop instance

[magento-engcom-team]

Hi @mfickers. Thank you for your request. I'm working on Magento 2.3-develop instance for you

[magento-engcom-team]

Hi @mfickers, here is your Magento instance.
Admin access: https://i-19335-2-3-develop.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[mfickers]

This is how the Wishlist grid looks without the float: left;

There are 3 items per row, when it should be 4 items.
And this is how it looks with float:left;

Now there are 4 items per row, which is correct, but the button bar is no on the bottom of the grid, but instead is below the first row.

[mfickers]

I found another fix for the issue, that works for the Wishlist, too.
Setting the font-size of the list to zero will ensure that all list items will fit into a single row.

.product-items {
    font-size: 0;

    .product-item {
        font-size: initial;
    }
}

[gelanivishal]

@VladimirZaets It's working for me. Please give me a screenshot or Check my solution in the

attached screenshot

[erfanimani]

The option I like best is to simply comment out the whitespace <!-- -->. The CSS font changes can cause side-effects or specificity issues.

So it'd look something like this:

            </li><!--
        --><?php endforeach; ?>

There has to be a comment explaining the comment though, in case someone in the future tries to "simplify" the template and cause a regression bug (like so #9019).

[sivaschenko]

@magento-engcom-team give me test instance

[magento-engcom-team]

Hi @sivaschenko. Thank you for your request. I'm working on Magento instance for you

[magento-engcom-team]

Hi @sivaschenko, here is your new Magento instance.
Admin access: https://pr-19335.instances.magento-community.engineering/admin
Login: admin Password: 123123q

[sivaschenko]

Hi @gelanivishal the issue can be viewed at the test instance that I launched: https://pr-19335.instances.magento-community.engineering/products.html

Here is the screenshot:

[gelanivishal]

@sivaschenko I can see that it's working as excepted.

[mfickers]

And this is how the wishlist looks with the changes:

It's easy too see that this breaks the layout, as the "Update", "Share" and "Add All to Cart" buttons aren't below the grid but right inside it.

I'd prefer a solution that keeps catalog grid and wishlist grid uniform and works for both.

[mfickers]

It gets even worse with more than four items:

[sidolov]

Hi @gelanivishal , I am closing this PR now due to inactivity.
Please reopen and update if you wish to continue.
Thank you for the collaboration!

[ghost]

Hi @gelanivishal, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.