-2

I'm working on a site wich has filters on category pages - http://www.purrfectlyyappy.com/fun-and-games/dog-toys

The filter is on the left hand side, but the text in the filter appears under the products when it's too long, is there a way i can set it to break onto a second line if the name is too long?

Seem like it should be easy, but i've been struggling on this!

Sam Gosheron
  • 15
  • 1
  • Please clarify: Do you mean that when the line is too long it comes vertically under the checkbox, when you want it justified under the start of the text (like bullet points normally work)? If so you need to get the flow right. Why not see how bootstrap does this - http://getbootstrap.com/css/#forms-controls – Ruskin Apr 05 '16 at 09:39
  • Just edit the width of that div so it doesn't go after the products? – Kees Sonnema Apr 05 '16 at 09:41
  • That Filter is set to be at 15% width, however the text flows outside of that width, id like it so that if the text goes past 15% width then it just breaks onto a new line – Sam Gosheron Apr 05 '16 at 09:50

2 Answers2

0

Use the overflow property.

enter link description here

Here, adding : 

overflow : scroll;

will make the "too long text" in a scroll area. There are many other values.

Aeldred
  • 314
  • 2
  • 15
0

This is happening because there is a css in you page

.hikashop_filter_checkbox {
    white-space: nowrap;
}

Above css is already applied on your html page which is forcing elements to come in single line.

You can either remove this css and if not then use following css in label

.hikashop_filter_checkbox label{
    white-space: normal;
}
Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74