Field Width in Quotations Module

đź’¬ General Discussion
1

Hi folks!

In Quotations Modules, when creating or editing a quotation, there are some fields that can become too small in some resolutions. For our use, the most important field is “Product Name” in Item List. I can make it larger if I hide the sidepanel. But the autocomplete search always appears very narrow. We have some products that starts with the same name. In this case, it’s impossible to distinguish which of them I’m searching.

How can I change the width for Product name field and for the auto complete square? For me, the best would be to put some fields in a row below the make more room for Poducto name.

Thank you all!!!

Screenshot

2

Take a look at modules/AOS_Products_Quotes/line_items.js

function insertProductLine
That’s where the input types get created. Try if you can get the size done.

3

Thank you urdhvatech! I had already searched in this same file you just told me with no luck.

But then, I found a CSS file that could do the trick:

cache/themes/SuiteP/css/Dawn/style.css

The solution was found in Chrome’s Dev Tools (F12), inspecting for the styles used in the field product_name, which had a class called .product_name with a width of 98%. I changed this value for a fixed value in px. Now the whole product line exceeds the screen width, making a horizontal scroll bar to appear. But that’s not a big deal…

It is a not very pretty workaround. But it’s the best I could get. If someone has a better solution, please speak up!

The width of the quick search box increased too, with this modification. Anyway, it doesn’t have an optimum width, yet. I’m struggling with this right now. I guess the solution is inside

cache/include/javascript/sugar_grp1_yui.js

But I couldn’t find exactly where, yet. I’ll keep trying.

Thank you anyway! Regards

1 Like
4

Thanks. Using your method, I was able to expand the drop down field as wide as I needed it. Unfortunately, it looks like the product name box always expands to about double the width of the drop down list.

Do you know of a way to expand the drop down list width without making the product name box so long? (i.e. how can I get the product name box back down to a more reasonable width)?

5

I inspected the Product Name Input and found a DIV with ID “EditView_product_name0_results” just under the Product Name input. The Styles of this DIV are constraints that cause the Populated Result list to be Narrow. i see following class to be applied to it.


@media (min-width: 1024px)
.col-sm-12 .col-sm-8 .yui-ac-container {
    float: left;
    width: 45%; 
}

The style is coming from the file themes/SuiteP/css/Dawn/style.css.
When i comment out width: 45%; the Auto-populate Results become wider as per the length of the Text Field.
This might be a bug in the styles.

6

@cherub-chum: If you use that method, you should make a copy of theme under custom/themes/SuiteP/ first then update any available subtheme under custom/themes/SuiteP/css in case users decide to use a different one from their profile.

Thanks,

AlxGr

7

Is this still working for you? I tried the same steps - plus changing the width to 500 px and a few other variations with a Quick R&R between each change. But no luck.

8

I think I found a solution - that is not upgrade safe through amalgamation of a few posts here and on GitHub.

In style.css - you need to search for yui-ac-container and replace the 45% width with 100% width.

In yui.scss you need to change line 60 from 45% to 100% - only when you do both does it work.

I’ve put the yui.scss in custom. For the style.css - I am assuming it also needs to go in custom - the whole file, or just the amended lines? I also already have a custom style.css to avoid splitting line item groups, so i don’t want to lose that customization.

9

The style.css that you place in custom should only have the replaced lines, not a copy of the entire file.

10

Thanks pgr!

To be clear - my current custom one has this

.suitepicon-module-contacts:before{content:"\f1c2"}
.suitepicon-module-accounts:before{content:"\f10b"}
.suitepicon-module-cstm-manager:before{content:"\f10e"}
.suitepicon-module-aos-quotes:before{content:"\f15a"}
.suitepicon-module-aos-invoices:before{content:"\f174"}
@media print {
.container { display: block; }
div, p { page-break-inside: avoid; }
}

Do I just append this

.yui-ac-container{float:left;width:100%}.col-sm-12

or do I need to add more?

11

Cancel that - I think just changing the yui.scss might work on it’s own after refreshing the browser. I reverted the style.css back to normal to implement it in custom - and the changes held.

12

Yes to your first question, append to style.css in custom.

No, I don’t think changing any scss file will have any effect, unless you recompile SASS. Those files are not used directly.

13

You are correct, it must have been a caching issue because the changes were lost until I appended this to my style.css file

@media (min-width:1024px) 
{
   .col-sm-12 .col-sm-8 .yui-ac-container {float:left;width:100%}
   .col-sm-12 .col-sm-6 .yui-ac-container{float:left;width:90%} 
   .yui-ac-container{float:left;width:90%}
}
1 Like
14

Hello guys, I´m experiencing the same problem, is there any solution to fix this?
Thank you!

15

Yo logré solucionar esto de la siguiente forma:
1- Cree el siguiente archivo: custom/modules/AOS_Products_Quotes/css/style.css
En el cual creo las clases para usar con los estilos que quiero, no olvidar el width para el tamaño!
2- custom/modules/AOS_Products_Quotes/line_items_AOS_Quotes.js
Aqui debes reemplazar los estilos de los elementos, yo lo hice mas o menos por la linea 190
dentro de la function insertProductLine(tableid, groupid)
3- Debes llamar a la hoja de estilo, esto lo haces en: modules/AOS_Products_Quotes/Line_Items.php

Y creo que eso es todo!
Saludos.

Pasen por aqui asi me ayudan con esto:

Se los agradezco!