Intellisense suggestions should display an horizontal scrollbar if needed

[fbricon]

• VSCode Version: 1.13.0
• OS Version: macOS Sierra 10.12.5

Steps to Reproduce:

1. install java extension
2. open java file
3. type import o, wait for suggestions to show up
   suggestions are truncated because the package names don't fit in the suggestion window, there's no way to scroll horizontally

See redhat-developer/vscode-java#249

Reproduces without extensions: Maybe

[stevencl]

I am not sure how well a horizontal scroll bar would work. How difficult would it be to increase the width to accomodate these longer strings, if the string is longer than would fit in the default width?

The problem with the scroll bar is that once you scroll to the right, you need to scroll back to the left if you arrow down and the next item is much shorter in length. A solution to that would be to auto scroll back to the left after making another selection but then that could run into problems if the list looks like the screenshot above.

[fbricon]

The problem with the scroll bar is that once you scroll to the right, you need to scroll back to the left if you arrow down and the next item is much shorter in length

This is the behaviour I see in Eclipse. With a trackpad, it's absolutely manageable.
I think this would give users less surprises than trying to autoscroll back when changing the selection.
A better solution would probably be to scroll left only if the selection text size is lower than the x-position of the currently visible pane, but that's probably too complicated

[hdorgeval]

One of my colleague shows me that, in the css that drives the suggestion list, there is a width:50% that is set. when forced to 100%, the width of the suggestion list is then ok (no cropping). It could be great if the suggestion-list max width could be parameterized directly in the workspace settings

[hdorgeval]

Here is a screenshot of this css rule:

When I set the value to 70%:

[hdorgeval]

I have also discovered that if you reduce the width of the VS Code editor window, then suddenly there is no more cropping as shown by the following sceenshot:

[emeentag]

This is definitely a usability issue and please take care of it. I am pretty sure you can solve it in a good way. Also as @fbricon said in eclipse and others there is horizontal scroll bar appears if horizontal scroll bar needed. Also you can resize the suggestion bubble with catching it and dragging from bottom right corner.

[emeentag]

@hdorgeval mentioned a quick hack, i will try to explain this quick hack until a solution is shipped in later releases. I also want to say that, suggestions became way better for me after this hack, especially while programming in java.

Steps:

• Open VsCode's package contents folder. It is the folder where you installed VsCode on your machine. Could be different for each operating systems.
• In mac i went through this path for the css file:
  Your Package Contents/Resources/app/out/vs/workbench/workbench.main.css
• Search for this line:
  .monaco-editor .suggest-widget.docs-side>.tree
• Edit width css property from 50% to 100%
• Save and restart vscode. You will get a warning like Your Code installation appears to be corrupt. Please reinstall. Just ignore it because with doing this way, we broke the md5 checksum of the installation. For me a proper suggestion much more important than this warning.

Before:

After:

[darkgem666]

Hi @hopbalabi , for some reason the hack didn't work for me.

• VsCode versio: Version 1.19.3 (1.19.3)
• MacOsX version: 10.13.2

[emeentag]

@darkgem666 please make sure you are editing workbench.main.css After you change this css you must restart the vscode.

[darkgem666]

I did.

[Aggror]

Hi @hopbalabi. Thanks for the tip. I even set it to 200%. Wish we could customize this using the settings or something.

[StephenOTT]

REALLY NEEDED! +1

At the very least have tooltip hover show the fully value when the mouse is hovering over a item...
or have the full value shown in the details window on the right... Right now there seems to be no way to see the value..

[poliarush]

+1

[s-shamesmuhametov-parc]

This hack works for me, but the VS Code version: 1.23.1 seems to have broken something. I want to configure without the hack

[akaroml]

Here to share a related issue microsoft/vscode-java-pack#255. Java classes often have longer full names. And the current completion list is showing ellipsis which omits the most important message, e.g. the class name.

Showing the horizontal scroll bar is definitely a nice workaround. But it would be nicer to ask the language server. Here are two options:

1. Vscode asks the language server to provide a short name by specifying the max length.
   a. Full name: org.hibernate.validator.internal.constraintvalidators.bv
   b. Parameter: maxLength: 50
   c: Result: org.hibernate.validator.internal.constraint...bv
2. Vscode asks the language server to mark the most significant part in the name (with a range), and then generates better short names.
   a. Full name: org.hibernate.validator.internal.constraintvalidators.bv
   b. Significant part: (54, 56) -> bv
   c. Result: org.hibernate.validator.internal.constraint...bv

[jrieken]

@akaroml Did you experiment with only using the last part as label, e.g. FooValidatorFactory, and to use the fully qualified name in the detail or description only? I am asking because I think that even adding a scrollbar or label-shorting won't help much with being able to quickly grasp what's showing on the screen. In addition to the short-labels you can still suggest package names, like so

label: FooValidator, detail: org.hip.hop. FooValidator
label: FooValidatorFactory, detail: org.hip.hop. FooValidatorFactory
label: org, detail: package

That would allow to type package names and type names and would make the IntelliSense widget less busy.

[muhd-ali]

@hdorgeval mentioned a quick hack, i will try to explain this quick hack until a solution is shipped in later releases. I also want to say that, suggestions became way better for me after this hack, especially while programming in java.

Steps:

• Open VsCode's package contents folder. It is the folder where you installed VsCode on your machine. Could be different for each operating systems.
• In mac i went through this path for the css file:
  Your Package Contents/Resources/app/out/vs/workbench/workbench.main.css
• Search for this line:
  .monaco-editor .suggest-widget.docs-side>.tree
• Edit width css property from 50% to 100%
• Save and restart vscode. You will get a warning like Your Code installation appears to be corrupt. Please reinstall. Just ignore it because with doing this way, we broke the md5 checksum of the installation. For me a proper suggestion much more important than this warning.

Before:

After:

The directory structure on v1.40.2 seems to have changed. The css files in the stated directory are named differently. Also setting it to 100% did not work for me. Not sure why.

[akaroml]

@akaroml Did you experiment with only using the last part as label, e.g. FooValidatorFactory, and to use the fully qualified name in the detail or description only? I am asking because I think that even adding a scrollbar or label-shorting won't help much with being able to quickly grasp what's showing on the screen. In addition to the short-labels you can still suggest package names, like so

label: FooValidator, detail: org.hip.hop. FooValidator
label: FooValidatorFactory, detail: org.hip.hop. FooValidatorFactory
label: org, detail: package

That would allow to type package names and type names and would make the IntelliSense widget less busy.

Just tried to put the short name in the front and it looks good enough for me. What do you think? @fbricon

[akaroml]

Further playing with my modification, there is actually a new problem. As I keep on typing "spring" to limit the search scope, the highlighting works in a weird way. I was expecting the term "org.spring" to be highlighted, but only "spring" is. I guess it has something to do with the string match algorithm in vscode.

[hxuanhung]

In case anyone wants to use the hack above, on Mac and vscode (1.41.0-insider) file name is changed to workbench.desktop.main.css

Steps:
Open VsCode's package contents folder. It is the folder where you installed VsCode on your machine. Could be different for each operating systems.
In mac i went through this path for the css file:
Your Package Contents/Resources/app/out/vs/workbench/workbench.main.css
Search for this line:
.monaco-editor .suggest-widget.docs-side>.tree
Edit width css property from 50% to 100%
Save and restart vscode. You will get a warning like Your Code installation appears to be corrupt. Please reinstall. Just ignore it because with doing this way, we broke the md5 checksum of the installation. For me a proper suggestion much more important than this warning.

[mahop-net]

What is the situation right now? Also for JS Development this box is pretty small? Resizing the Box with the mouse and remembering the width and hight for the next time would be great...

Or a setting somewhere here: (Workspace and User)

[ValentinH]

A pretty similar issue is with the "auto-import" labels which are way too short:

When you are importing a type with a common name, it's really hard to know which one to import.

[ValentinH]

I actually noticed that if you hover the row, there is an "i" icon.

If you click on it, the description will be shown in a new popup attached to the first one:

The best part is that once you clicked it, it will stay in this mode for the next time.

[jayjun]

To everyone resorting to the CSS hack, upvote #30140 to make bottom suggestion details permanent.

[chetrf]

To anyone having trouble getting the CSS hack to work, one more detail that finally made it work for me: I had to change the Editor: Suggest Font Size from zero to something smaller than my default font. I had almost given up on getting the CSS hack to work. After I did that the change from 50% to 100% worked. This is on MacOs Catalina.

It seems I can make it bigger, smaller, or zero and the CSS hack now works. Something about changing it made the change start working.

[Jonathan0wh]

waiting for feature request #29126

[JCKodel]

1. Create the following css in your user folder (figure out paths if you are not on Windows):

.monaco-editor .suggest-widget.docs-side{
  left: 32px !important;
  right: 32px !important;
  width: calc(100vw - 64px) !important;
}

  .monaco-editor .suggest-widget.docs-side .tree {
    width: 34% !important;
  }

  .monaco-editor .suggest-widget.docs-side .details {
    width: 66% !important;
  }

2. Install be5invis.vscode-custom-css extension

3. Insert this on your settings.json:

  "vscode_custom_css.imports": [
    "file://C:/Users/jckod/vscode.css"
  ],
  "vscode_custom_css.policy": true

4. Press F1 to get the command palette and run Reload custom CSS and JS

5. Restart VSCode when requested in the notification

6. Ignore the "VSCode install is corrupt"

Nice full screen intellisense, with no jumping.

See? Is not that hard, Microsoft. I don't care if it is not right on the cursor position. I just care about being able to read the f☠ documentation ¬¬

[jrieken]

The suggestions and the details part are going to be resizable (see #29126 (comment)). I am closing this as a related/duplicated issue.