Sublime Forum

**tobeyg** · August 26, 2017, 9:50pm

While I was using Atom and doing CSS I could write display for example with a colon after it and automatically get a popup with the alternatives that I could put there (block, inline etc). I’m trying to get this to work with Sublime Text 3, but I can’t really get the popup to show immediately after writing the colon.

Right now when writing display for example, I get a popup with fitting attributes (in this case just display of course). I can then either press Enter to select that option from the popup or press : like you otherwise would. Pressing Enter just adds a colon and a whitespace. Pressing : automatically adds a semicolon.

Neither of the choices gives me a popup with alternatives to put in the attribute. I can press Ctrl + Space (on Mac) to show the popup with suggestions manually, but if I previously have pressed :, the automatically added semicolon makes the suggestions wrong.

Is there any way to make the autocompletion show me suggestions automatically after having “display:” written? I currently have Emmet installed, but disabling it doesn’t seem to change the behavior.

**kingkeith** · August 27, 2017, 6:16am

which build of ST are you using? there was a bug relating to CSS completions that was fixed after 3126:

**tobeyg** · August 28, 2017, 8:34pm

I’m currently on build 3142.

The thing is that the completion works when I press Ctrl + Space, and it will come up if I start writing block for example after I’ve written display:. But I would like the behaviour to be that the autocompletion comes up automatically after I’ve written display: with the available alternatives, rather than having the alternatives popup when writing something further or pressing Ctrl + Space.

Is this how it should work?

**kingkeith** · August 31, 2017, 4:39am

You could try adding this to your user preferences to get auto complete to automatically show when pressing : in CSS files:

    "auto_complete_triggers":
	[
		{
			"characters": ":",
			"selector": "meta.property-name.css support.type.property-name.css"
		}
	],

it seems that ST won’t automatically show completions if an autocompletion added the trigger character automatically, however, even if the caret ends up immediately to the right of it, so you need to type the colon manually which is a bit annoying… a plugin could probably try to workaround this, but as I have discovered before, its not easy to do if an entry is clicked on (as opposed to committed with the keyboard - so it may not necessarily affect your use case, but useful to know about I think):

EDIT: this is the way I handled it in the XPath plugin (that deals with an input panel):

github.com

rosshadden/sublime-xpath/blob/fee7049be16acfb222a16f8a0549c2a24718e4c3/xpath.py#L937-L945


def on_completion_committed(self):
    # show the auto complete popup again if the item that was autocompleted ended in a character that is an auto completion trigger
    for cursor in self.input_panel.sel():
        prev_char = self.input_panel.substr(cursor.begin() - 1)
        if prev_char not in self.arguments['auto_completion_triggers']:
            return
    
    self.input_panel.run_command('auto_complete')
    self.input_panel.window().focus_view(self.input_panel)

**tobeyg** · August 31, 2017, 12:52pm

Thank you! But it doesn’t seem to work when I add your snippet to the preferences.

**kingkeith** · August 31, 2017, 1:56pm

hmm, try using meta.property-list.css as the selector. In my case I also add space to the trigger characters, as otherwise I end up with no space between the colon and the value…

**tobeyg** · August 31, 2017, 5:15pm

No luck there either I’m afraid.

I’ve also noticed another problem. There seems to be a difference in the autocompletion between CSS and SCSS files. If I write display: and thereafter begin to write blo to get block to appear, it works as expected when editing CSS files. But when I edit a SCSS file and try the same thing, I get irrelevant suggestions (such as html, body, section and nav) with block nowhere to be found.

EDIT: Your fix seems to work with SCSS files however. If I write display and then put a colon directly after (without clicking on the suggestion or clicking) I get the autocomplete popup. However, as mentioned above, when doing this in SCSS I get irrelevant suggestions with even HTML elements as options.

**kingkeith** · September 1, 2017, 12:16pm

I’ve not tried with SCSS (guessing its a bug with the syntax definition scoping things as if they were HTML?) but CSS seems to work fine for me on build 3142 with the auto_complete_triggers setting I mentioned:

I agree that it is not optimal though, hence my plugin suggestion. If it helps, you could override the Packages/CSS/css_completions.py file to not include the space after the colon, then you can just Tab to select display which will insert the :, then press Space and get the proper suggestions.

**tobeyg** · September 5, 2017, 7:11pm

Thank you so much! I will try the things you’ve suggested.

Maybe it’s a matter of preference, but I just think it’s annoying having the semicolon added automatically, especially with this issue. It’s also a bit irritating that you then have to skip to the right of the semicolon before making a linebreak.

Show CSS alternatives automatically