Author Topic: Aligning buttons at the bottom in Products Module  (Read 1488 times)

chrlar

  • Beginner
  • *
  • Posts: 44
    • Kollevold Rally Import As
  • VirtueMart Version: 2.0.20b
Aligning buttons at the bottom in Products Module
« on: March 06, 2013, 23:32:27 pm »
I have made some adjustments to the module, but I still have one more issue I can't seem to figure out.

I have 4 products per row, and since some products have longer titles than others, the price and "add to cart" buttons are not in line. I find that is looks a bit messy.

I would like to have some code to put in somewhere, that says to put in a blank line if the product title is on only one line.

See attached image, the you understand what I mean... :)
(Yes, we need to clean up the titles too.. )

Thanks! :)

[attachment cleanup by admin]

K&K media production

  • VirtueMart Developer Team
  • Global Moderator
  • Full Member
  • *
  • Posts: 838
  • VirtueMart Version: VM3 on J3
Re: Aligning buttons at the bottom in Products Module
« Reply #1 on: March 07, 2013, 00:17:00 am »
You can put the title in a div and then use css min-height with the value of 2 lines.

chrlar

  • Beginner
  • *
  • Posts: 44
    • Kollevold Rally Import As
  • VirtueMart Version: 2.0.20b
Re: Aligning buttons at the bottom in Products Module
« Reply #2 on: March 07, 2013, 09:22:47 am »
Haha... Why didn't I think of that...?  :P
Thank you! :)  ;D

(I think I've been sitting by the computer too long...) ;)

Now it looks great! :D

micropalla

  • Beginner
  • *
  • Posts: 39
Re: Aligning buttons at the bottom in Products Module
« Reply #3 on: June 28, 2013, 11:20:36 am »
Can you explain me better?

K&K media production

  • VirtueMart Developer Team
  • Global Moderator
  • Full Member
  • *
  • Posts: 838
  • VirtueMart Version: VM3 on J3
Re: Aligning buttons at the bottom in Products Module
« Reply #4 on: June 29, 2013, 19:27:29 pm »
Look in your template override for title and put it in a div with a specific class. If you don't use overrides, make a override.
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

Then use CSS with min-height.
http://www.w3schools.com/cssref/pr_dim_min-height.asp