Jump to content

Faceted search text wrapper


Recommended Posts

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. 

faceted search.jpg

Share this post


Link to post
Share on other sites
  • 2 weeks later...

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 by Alien(PL) (see edit history)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

alignment.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More