How to adjust the AutoSuggestBox's width for Part Number in Line Items?

The AutoSuggestBox width is too narrow, which is quite useless for me as my Part Numbers are quite long

I tried to edit the yui.css in themes/SuiteP/css/suitep-base, but no luck.

.yui-ac-content {
  position: absolute;
  background: $main-alternate-bg;
  border: 1px solid $panel-default-border;
  overflow: hidden;
  width: 400% !important; //default is width: 100%
  z-index: 9050;
}

Any help would be appreciated.

Thanks

Please check Quote module line items width

Yes, I checked this post, but the method doesn’t work in SuiteP

Thanks

try putting that CSS snippet by itself, in a new file:

custom/themes/SuiteP/Dawn/css/style.css

Create any missing sub-directories as needed. Run a QR&R when finished, and force browser cache refresh

EDIT: fixed path to include sub-theme

1 Like

Thanks, but still doesn’t work.
I copied following code from yui.scss in themes/SuiteP/css/suitep-base to custom/themes/SuiteP/css/style.css

.yui-ac-content {
  position: absolute;
  background: $main-alternate-bg;
  border: 1px solid $panel-default-border;
  overflow: hidden;
  width: 100%;
  z-index: 9050;
}

I also tried to play the width with these settings, but no luck
width: 400% !important;
width: 400%;
width: 320px !important;
width: 320px;

My SuiteCRM version is 7.11.18

Thank you very much

First, is your file getting recognized? Do you see that z-index: 9050 coming up in the browser? If it was already there before, change it to something distinctive like 9049.

First you need to check that your custom file is being loaded, then you can improve your style selector and CSS properties.

1 Like

The custom css file doesn’t load, but I managed to fix the width.
I edited this line in style.css in themes/SuiteP/css/Dawn (not the custom folder)

Edit: The custom css file will load if I put it in custom/themes/SuiteP/css/Dawn/style.css

.yui-ac-content {
  position: absolute;
  background: $main-alternate-bg;
  border: 1px solid $panel-default-border;
  overflow: hidden;
  **width: 400% !important;**
  z-index: 9050;
}

Thank you very much

Cool, I’m glad you got it working. I edited my post above to use the correct path, I had forgotten the sub-theme subdirectory, as you discovered. :+1:

Note that SCSS variables ($main-alternate-bg) won’t do any good when included at this stage. But you can just leave out the properties that you don’t need to redefine.

1 Like

Hello,
I managed to solve the problem and increase the field width by editing the themes/SuiteP/css/Day/style.css file
look inside for

.yui-ac-content{position:absolute;background:#fff;border:1px solid transparent;overflow:hidden;width:100%;z-index:9050}

change the width:100% snippet to the value you want ex.: width:600px !important;

save the change, return to the main suitecrm folder and remove the cache/ folder
refresh browser page, task completed.

Hope it helps and it works for you