Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: Bootstrap5 and Three Columns  (Read 7305 times)

Offline dhigz

  • Newbie
  • *
  • Posts: 46
  • Karma: +17/-0
    • View Profile
Bootstrap5 and Three Columns
« on: September 09, 2023, 04:00:46 PM »
I recently upgraded a site to AbanteCart 1.3.4 and using the Bootstrap5 template. No matter what I do, I cannot get the page to work with three columns. Using either column left or column right work fine but both destroys the layout.

What happens: When using three columns, the columns stack instead of being displayed inline.

I have tried several different combinations of flex utilities with some success but nothing works consistently.

I would really like to use a three column layout. Any thoughts? Suggestions?
Don Higbee

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5937
  • Karma: +284/-2
    • View Profile
Re: Bootstrap5 and Three Columns
« Reply #1 on: September 11, 2023, 04:48:52 AM »
Hello.
You cant use 3 columns in this template

Offline dhigz

  • Newbie
  • *
  • Posts: 46
  • Karma: +17/-0
    • View Profile
Re: Bootstrap5 and Three Columns
« Reply #2 on: September 23, 2023, 07:45:15 PM »
Well, respectfully, I didn't like the answer. So I set out to find a solution. Here it is.

The goal is to specify the width of the center column based on the number of columns on a page layout and set the col-lg-[value] accordingly. Ideally 0 for 1 column (width = 100%), 6 for 2 columns (width = 50%) and 4 for 3 columns (width = 33.33%).

In page.tpl there is an attempt to use a math equation to determine the width of the center column based on the number of columns on the page. It starts with 0 and adds 1 each for left and right columns to get the $preset_columns value. Then through the calculation 12 - 6 * $preset_columns, it is supposed to determine the value.

Two columns works correctly (12 - 6 * 1 = 6).
But no matter how you slice it, you cannot increase a value and expect to get a lower value result: 12 - 6 * 2 = 0, not 4.

The simplest answer is to do away with the current formula and just set a value based on the number of columns. There are multiple ways to write the formula to come up with the correct values but the end result needs to be 1 col = 0, 2 col = 6, and 3 col = 4.

It works great on my site.
Don Higbee

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 5937
  • Karma: +284/-2
    • View Profile
Re: Bootstrap5 and Three Columns
« Reply #3 on: September 25, 2023, 01:38:58 AM »
Hello.
Thank you for sharing. You are welcome to submit a pull request to the 1.3.5 github branch to make your code visible to others
https://github.com/abantecart/abantecart-src/pulls

 

Powered by SMFPacks Social Login Mod