Faceted search text wrapper

[Nexus85]

I added a few faceted search options but not all the text is shown. When it's to long it will be hidden. See the image. I want to wrap the text, so the sidebar will be the original size.

 

Hope someone can help me. 

[Nexus85]

anyone a solution?

[Alien(PL)]

You can change that in CSS

#search_filters .facet .facet-label a {
    [..]
    white-space: normal;
}

I would also sugest to change the aligument of elements in

#search_filters .facet .facet-label

so the checkbox and the test looks nice.

Edited December 9, 2020 by Alien(PL) (see edit history)

[Nexus85]

2 hours ago, Alien(PL) said:

You can change that in CSS

#search_filters .facet .facet-label a {
    [..]
    white-space: normal;
}

I would also sugest to change the aligument of elements in

#search_filters .facet .facet-label

so the checkbox and the test looks nice.

Thank you for the reaction, but can you explain exactly where and how I need to change this. I'm fairly new in prestashop

[Alien(PL)]

in the theme folder in assets there is css folder you will find there theme.css or custom.css

[Nexus85]

10 minutes ago, Alien(PL) said:

in the theme folder in assets there is css folder you will find there theme.css or custom.css

This is how the custom.css looks:

 

/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 
 #search_filters .facet .facet-label a {
    [..]
    white-space: normal;
}

#search_filters .facet .facet-label

 

But nothing happens, I know I'm not a programmer so I need a bit more explanation

[Alien(PL)]

what i gave you is not a copy-paste solution it was more a hint of where and how to fix it. Now your custom.css won't affect anything because how you copy-pasted it creates an error.

Also deepend on your presta configuration you need to clear cashe.

i sugest go to theme.css find the line

#search_filters .facet .facet-label a

and replace: white-space: no-warp with : normal;

also remove all changed you did in custom.css

[Nexus85]

Now I put this in Custom.css:

#search_filters .facet .facet-label a,#search_filters_brands .facet .facet-label a,#search_filters_suppliers .facet .facet-label a
{
  white-space: normal;
  margin-top: .4375rem;
  color: #232323;
  display: inline-block;
  font-size: .9375rem;
  
}

#search_filters .facet .facet-title,#search_filters_brands .facet .facet-title,#search_filters_suppliers .facet .facet-title
{
  color: #7a7a7a;
  white-space: normal;
}

 

And this works, only the alingment of the checkbox I can't get right and the alignment of the options.