Magento Question posted in
The official documentation can be found here.

Magento 2 aligning add to car buttons on new_grid.phtml

As you can see from my screenshot I am trying to align the Add to card buttons horizontally. I have narrowed down the file to “New_grid.phtml” but im not sure where to start in terms of actually aligning them!

Non aligned add to cart buttons

I believe this is the div that needs aligning which is within “new_grid.phtml”

                                    <div class="product-item-actions">
                                        <?php if ($showCart): ?>
                                            <div class="actions-primary">
                                                <?php if ($_item->isSaleable()): ?>
                                                    <?php if ($_item->getTypeInstance()->hasRequiredOptions($_item)): ?>
                                                        <button class="action tocart primary"
                                                                data-mage-init='{"redirectUrl":{"url":"<?= /* @escapeNotVerified */ $block->getAddToCartUrl($_item) ?>"}}'
                                                                type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php else: ?>
                                                        <?php
                                                            $postDataHelper = $this->helper('MagentoFrameworkDataHelperPostHelper');
                                                            $postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
                                                        ?>
                                                        <button class="action tocart primary"
                                                                data-post='<?= /* @escapeNotVerified */ $postData ?>'
                                                                type="button" title="<?= /* @escapeNotVerified */ __('Add to Cart') ?>">
                                                            <span><?= /* @escapeNotVerified */ __('Add to Cart') ?></span>
                                                        </button>
                                                    <?php endif; ?>
                                                <?php else: ?>
                                                    <?php if ($_item->getIsSalable()): ?>
                                                        <div class="stock available"><span><?= /* @escapeNotVerified */ __('In stock') ?></span></div>
                                                    <?php else: ?>
                                                        <div class="stock unavailable"><span><?= /* @escapeNotVerified */ __('Out of stock') ?></span></div>
                                                    <?php endif; ?>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                        <?php if ($showWishlist || $showCompare): ?>
                                            <div class="actions-secondary" data-role="add-to-links">
                                                <?php if ($this->helper('MagentoWishlistHelperData')->isAllow() && $showWishlist): ?>
                                                    <a href="#"
                                                       data-post='<?= /* @escapeNotVerified */ $block->getAddToWishlistParams($_item) ?>'
                                                       class="action towishlist" data-action="add-to-wishlist"
                                                       title="<?= /* @escapeNotVerified */ __('Add to Wish List') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Wish List') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                                <?php if ($block->getAddToCompareUrl() && $showCompare): ?>
                                                    <?php $compareHelper = $this->helper('MagentoCatalogHelperProductCompare');?>
                                                    <a href="#" class="action tocompare"
                                                       data-post='<?= /* @escapeNotVerified */ $compareHelper->getPostDataParams($_item) ?>'
                                                       title="<?= /* @escapeNotVerified */ __('Add to Compare') ?>">
                                                        <span><?= /* @escapeNotVerified */ __('Add to Compare') ?></span>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up making the block that holds the text have a minimum height this solved the issues as long as our title dont get too long! This was added to new_grid.phtml min-height added to new_grid.phtml


  2. 0

    Hope in your case the complete name of product showing is not mandatory if it is lengthy., If so, you can make the name as shorten by using three dot css..And your alignment will be fine..please try to implement this too..And it will also help you to get hit for your product detail page and the other related products..

    Three dot css : 

    #content_right_head span{
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

    Use your name class instead id here

    Just change the width as of your need..

    If showing entire name is mandatory, then give min height for your name area too..Hope this will help. The first one is recommended..

    Login or Signup to reply.
  3. 0

    If you don’t want to cut the name of the product, you can use flexbox. There is a complete mixin inside _utilities.less within Magento lib/ folder that you can reuse on your theme styles.

    With that tool, the elements will get the height of the tallest for each row. No need to set a min-height which is not the best case scenario for a Responsive fluid website.

    Check this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
  4. 0

    You should use

    #content_right_head span{
    display:inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;

    max-width:180px;
    width: 100%;
}

    If you don’t want break the responsive

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search