Jump to content

How To Increase Width Of Product Attribute Box?


flowfeet
 Share

Recommended Posts

I have added some attribute values to my products and there are a few that have more characters than others. When the attribute is selected and it is too long it will show "..." instead of the actual value. Is there a way to increase the width of the actual attribute box so that the entire value will show when the box is selected? 

I've used the browser inspect element and found that it is using some inline styling element, however I do not know where it is pulling this from.  

post-864114-0-20542200-1481923350_thumb.png

Share this post


Link to post
Share on other sites

look in this file:

themes\your_theme\product.tpl

and in this part change this width and height values

<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}"
 title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />

Share this post


Link to post
Share on other sites

I updated the height and width within the product.tpl file for that element but no change. There is a <span> tag that has the width value (48px), but not sure where to find it.
 

<div class="selector" id="uniform-group_4" style="width: 58px;"><span style="width: 48px; user-select: none;">9.5</span></div>

Share this post


Link to post
Share on other sites

  • 3 years later...

Hi

i have same problem.i see the answer about the file product.tpl but in my theme i don't find any value about attribute box size

i use prestashop 1.7.6.4 with default theme 

i need to change the size of attributes box (so i can show attributes like miniatures -little images) to click & select

Thaks in advance for support

preview.png

Share this post


Link to post
Share on other sites

  • 2 weeks later...

@Essenze Total Style

Don't know if you still need this but for PS 1.7 you can find the code in theme.css in the folder themes/classic/assets/css.

Then find the part that says: 

input[type=checkbox]+span.color 

After that part change the value of 

width:1.25rem;height:1.25rem

to something you prefer.

 

-Dave

Edited by Nickless (see edit history)

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
 Share

×
×
  • Create New...

Important Information

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