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

SuiteCRM Forum - English Language SuiteCRM General Discussion
1

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

line_item_suggestion_box_edit
line_item_suggestion_box_edit1497×421 26.6 KB

line_item_suggestion_box_2
line_item_suggestion_box_2979×518 52.2 KB

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

2

Please check Quote module line items width

3

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

Thanks

4

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
5

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

6

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
7

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

8

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
9

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

10

The yui-ac-content takes the 45% or 90% width of its parent yui-ac-container which in turn inherits 100% based on responsive.
Another approach is inside the detail view of AOS_Invoice set the css using jquery we can set the parent width like below.
$(‘.yui-ac-container’).css(‘width’,‘150px’);
This will help your list to width to be larger than the default. If you are using different screen i would suggest to use calc field in the width.
Hope this helps