ZCA Bootstrap 4 Template [Support Thread]

[nicksab]

Can you go to jeandretDOTcom and place an item in the shopping cart while in mobile to see if this matches your look? This is the latest bootstrap with a standard demo load.

Either that or give us a link we can look at?

I tried jeandretDOTcom and it is behaving the same way as my site. For reference, my site is royal-fleurDOTcom/upgrade.

I tried a few different thing on either site.

While in the shopping cart page:

- if the product has no attribute, the table (quantity/item name/price/total) is display is display within the "viewport"

-if the product has attributes, the colum total from the table gets push to the side like out of the "viewport"

Hope this makes and sorry for the lack of better words to describe it.

Picture from jeandret site :

No attributes on product



With both attribute and no attribute



Thank you for looking into this and helping me out

[dbltoe]

I'm going to have to defer to someone more familiar with the guts of bootstrap.

You should be able to use CSS to control the element's width with either a percentage, fit-content, or some other setting. None of them effect the .table-responsive except the removal of an overflow-x:auto and you only see that in products with attributes.

It is displayed in two different sizes when the item has or doesn't have attributes but I can't find what is controlling it.

360.4 x 274

360.4 x 202

[nicksab]

I'm going to have to defer to someone more familiar with the guts of bootstrap.

You should be able to use CSS to control the element's width with either a percentage, fit-content, or some other setting. None of them effect the .table-responsive except the removal of an overflow-x:auto and you only see that in products with attributes.

It is displayed in two different sizes when the item has or doesn't have attributes but I can't find what is controlling it.

360.4 x 274

360.4 x 202

Thank you dbltoe

i tried a few thing in css as well like padding and margin but no luck.

It is too bad as all my product have attributes but i guess a bit of side scrolling can't hurt.

[simon1066]

Thank you dbltoe

i tried a few thing in css as well like padding and margin but no luck.

It is too bad as all my product have attributes but i guess a bit of side scrolling can't hurt.

I too am not that familiar with Bootstrap but I think you could shift the attributes to the left and remove their list style for small screens, like this

@media (max-width:???px) {

.productsCell-attributes ul {
  padding-left: 0px;
  list-style: none;
}

}

That almost does it for resolutions down to 360px width, to remove scrolling completely at that width play about with the padding of .productsCell

(I'm assuming that the productsCell class isn't used elsewhere - worth checking)

[dbltoe]

Thanx to ASAlishaa for adding the bootstrap cheatsheet to the bootstrap reamde.md I think I may have found where the problem is coming from.

The particular table is given the class table-responsive and table responsive is actually in the CSS.

However the bootstrap cheatsheet suggests that the class should be table-*-responsive with the * being sm, md, lg, or xl. It's possible that the missing clarifier is not letting CSS do its thing.

I will have to test when back at the computer later today.

[nicksab]

Thanx to ASAlishaa for adding the bootstrap cheatsheet to the bootstrap reamde.md I think I may have found where the problem is coming from.

The particular table is given the class table-responsive and table responsive is actually in the CSS.

However the bootstrap cheatsheet suggests that the class should be table-*-responsive with the * being sm, md, lg, or xl. It's possible that the missing clarifier is not letting CSS do its thing.

I will have to test when back at the computer later today.

Thank you for looking into this and let me know how the testing goes please

[lat9]

I've just submitted v3.4.0 of the Bootstrap-4 template; it's now available for download (https://www.zen-cart.com/downloads.php?do=file&id=2191) and supports the Zen Cart 1.5.7 series as well as 1.5.8!

This release contains changes associated with the following GitHub issues and has been validated with Zen Cart v1.5.8:

#151: Update zen_cfg_read_only, using zc158 version for zc157 change
#150: Remove redundant button definitions
#147: ZcaBootstrapObserver::setVariables incompatible with PHP 8.2's dynamic properties' restriction
#142: Enable additional content to be displayed on the shopping_cart page
#141: Use 'standard' Zen Cart HTML 'id' for cart quantity/button display and centerboxes
#140: Don't include conditions if shipping and/or billing isn't available
#139: Preload (rather than prefetch) the CDN-based css/js files
#138: Consolidate One-Page Checkout/Bootstrap template integration
#137: 'common_address_formatting', set as primary checkbox should appear only for address_book_process
#136: Move 'country' selection above 'state' in common-address formatting
#135: Remove unused template files for all/featured/new products' listings
#135 opened on Jul 18 by lat9
#134: zc158 Compatibility, overall changes required.
#133: Exporting ZCA Bootstrap Colors
#132: orphan statement in tpl_modules_manufacturer_info
#131: modules\bootstrap\category_row.php compare to core ZC158 query
#130: centerboxes\new_products.php comparison to core query
#125: contact_us "Send Email To:" Selection Is Not Really Required
#124: Raw HTML displayed for when customer views an order's history
#122: Restore 'base' Zen Cart attributes HTML class and id attributes.