Quote module line items width

In the quotes module when you add a line item, you can type into the product name or part number and it will list the matching items found as you type. Problem is that the column width is too narrow for that drop down. We may have product names or part numbers that are very similar and because you only see a limited amount of description you don’t know which one to pick from the list.

Where can we edit the column width of the drop down list?

Thanks

it in the css, check out themes/Suite7/css/yui.css, I’m pretty sure its #yui-ac-content you would need to modify

Hi Matt
That is it, at least if i change the attribute in Chrome with the inspect element, it does widen this column.

However when i edit the file and change the 162px to 320px, restart everything, the column width is not changed. It sill appears as 162px in Chrome but in the file it is 320px.
.yui-ac-content {
position: absolute;
border: 1px solid #808080;
width: 320px;
background: #fff;
overflow: hidden;
z-index: 9050;
Sorry, I am not a programmer so I don’t know if i am doing something wrong.
Please could you guide me?

Thanks

If you inspect the element for the dropdown you will see this attribute on the div: style=“width: 162px; height: 38px;”

This means its an inline style and is hardcoded, you will have to find where this is in the code and change it, however you can try this little css trick first to see if it works.

Edit your css again and add !important after the width like so:

yui-ac-content {
position: absolute;
border: 1px solid #808080;
width: 320px !important;
background: #fff;
overflow: hidden;
z-index: 9050;

!important tells it to ignore subsequent rules and use that one.

Also do a quick repair and rebuild and clear your browser cache.

Hi Andy
Adding !important did not help. It seems this css is being inherited from some other setting, but i dont know enough to know what I am looking for.
Any help would be appreciated.

Just tried it and it seems to work as Matt says

edit : themes/Suite7/css/yui.css line 59 and change the width to what ever you want.

The go admin/repair and do a quick repair and rebuild.

clear your browser cache.

Job done.

1 Like

Hello,
I am facing the same problem as the product name field is too small in the edit view to select the right products for us.
Unfortunately the above mentioned fix to enlarge the width in yui.css line 59 doesn’t seem to work anymore. Or am I wrong?

I tried to edit the file directly in themes/Suite7/css/yui.css or in custom/themes/Suite7/css/yui.css (that I copied there) but still after rebuild & repair and browser reload the colums are still the same old small width.

Could you please give me a hint? I also tried to remove the part number field in the öline_items.js but failed miserably.

Please, any point in the right dircetion would save me :wink:

Thanks,
Thomas.

Hi, I have the same problem but in SuiteP theme, This solution, doesn’t work in this theme, can you help me?

Hi,
I apologize in advance if I bring up this discussion from some time ago.

Basically, any setting of yui-ac-content doesn’t work because right above it is yui-ac-container at 45%. See Attachment.

This class is always inside the yui.scss file but there is no way to see the changes. “!important”, Repair and rebuild, clear cache don’t work.

Has anyone had any luck on this topic?

Trying playing around with the #important flag.

If that doesn’t work please raise a new topic where users can assist you better than on this legacy one :+1: