Print Page - Product Title on two lines

Title: Product Title on two lines
Post by: nicodya on October 29, 2018, 09:55:54 AM

Hi, I want to show my products title on two lines, how can I do this? Thank You!

This is the current view: https://www.matelelettronica.it/catalogo.html

Title: Re: Product Title on two lines
Post by: GJC Web Design on October 29, 2018, 10:46:14 AM

Dress Shirt with tie<br />line two

remove your css

.vm-product-descr-container-1 > h2, .vm-product-descr-container-0 > h2 {
font-size: 15px;
font-weight: 600;
margin-top: 16px;
/* overflow: hidden; */
text-align: center;
/* text-overflow: ellipsis; */
/* white-space: nowrap; */
line-height: normal;
}

Title: Re: Product Title on two lines
Post by: nicodya on October 29, 2018, 19:08:18 PM

yes, in this way is ok, but i want only maximum two lines.. not more. How can I do this?

Title: Re: Product Title on two lines
Post by: Studio 42 on October 29, 2018, 22:13:56 PM

Set max-height or height with CSS
.vm-product-descr-container-1 > h2, .vm-product-descr-container-0 > h2 {
font-size: 15px;
font-weight: 600;
margin-top: 16px;
overflow: hidden;
text-align: center;
/* text-overflow: ellipsis; */
/* white-space: nowrap; */
line-height: normal;
max-height: 36px;/* or height: 36px; to get always same height for all*/

}

Title: Re: Product Title on two lines
Post by: nicodya on October 30, 2018, 09:18:41 AM

ok, now is better!! But there is a way to show suspension dot and then when i go on hover with mouse I can see complete title like popup?

Title: Re: Product Title on two lines
Post by: AH on October 30, 2018, 09:43:39 AM

It might be time for you to pay a developer for your specific coding requirements.

Title: Re: Product Title on two lines
Post by: Studio 42 on October 30, 2018, 11:04:08 AM

To auto display dots, you can only display using
text-overflow: ellipsis;
white-space: nowrap;
But in this case, it display only first line.
So no it's not possible to display 2 lines and dots but it's possible to add rules using :hover, selector but it's more complex and need additional rules and certainly an addition DIV.

Title: Re: Product Title on two lines
Post by: GJC Web Design on October 30, 2018, 11:22:51 AM

or use the native FE helper function static public function limitStringByWord ($string, $maxlength, $suffix = '')

Title: Re: Product Title on two lines
Post by: nicodya on October 30, 2018, 11:43:48 AM

ok, thank you Studio 42 and GJC Web Design :) But if I want to insert tooltip on hover product title? (to show complete product title)

Title: Re: Product Title on two lines
Post by: Studio 42 on October 30, 2018, 18:23:05 PM

Use a tooltip javascript + limitStringByWord

Title: Re: Product Title on two lines
Post by: nicodya on October 31, 2018, 09:46:09 AM

Which is the name of php file? I'm looking for it

VirtueMart Forum

VirtueMart 2 + 3 + 4 => Templating & Layouts => Topic started by: nicodya on October 29, 2018, 09:55:54 AM