The agony of CSS in Emacs on Auto Complete Mode, portrayed vividly!

Recently, I added Auto Complete Mode to my Emacs setup.

Issue #1: When typing declarations, the auto-complete feature works fine until I hit ;:

Unexpectedly, it automatically tries to complete something! Pressing Enter would accept this unwanted completion.

To bypass this problem, I have to resort to using C-j. Quite inconvenient.

Issue #2: Upon completing a declaration by typing }:

The indentation does not happen correctly unless I manually press Tab.

Any idea why this is happening?

Update on settings:

My current setup includes Emacs 23. The keys for triggering CSS completions are set to } and ;. Here is a snippet of my Auto Complete configuration:

(ac-config-default)
(setq ac-auto-start t)
(setq ac-delay 0.1)
(setq ac-auto-show-menu nil)
(setq ac-show-menu-immediately-on-auto-complete t)
(setq ac-trigger-key nil)
cssemacsautocomplete

Answer №1

If you’re struggling with auto-complete issues in Emacs, here are a few potential solutions to consider:

  1. Adjust the (setq ac-auto-start t) setting to only enable autocomplete after typing a certain number of characters by changing it to (setq ac-auto-start 1). This could help prevent autocomplete from incorporating preceding text after entering a semicolon.

  2. Check if Emacs is recognizing the semicolon as a delimiter character. You may need to add the semicolon string to ac-ignores to resolve this issue (syntax for this adjustment may vary).

  3. Explore disabling auto-completion triggered by the enter key by modifying key bindings with 

    (define-key ac-complete-mode-map "\t" 'ac-complete)
    and 
    (define-key ac-complete-mode-map "\r" nil)
    . However, be cautious of any conflicts with DWIM functionality.

  4. Experiment with adding the semicolon itself as a key trigger for auto-complete features.

While my expertise in .emacs customization is limited to about 1.5 out of 10, these suggestions might spark further ideas for resolving your specific problem.

Answer №2

While this information may not be new, I suggest giving the following a try:

(add-hook 'css-mode-hook       
  (lambda ()
     (make-local-variable 'ac-ignores)
     (add-to-list 'ac-ignores ";")))

Refer to the manual for more details.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML content is not responsive to varying screen sizes

Currently, I am in the process of developing a Wordpress page using WPBakery Page Builder. To enhance the design, I extracted some HTML/CSS code from an existing page by using SnappySnippet and pasted it into the new page within a "Pure html" block. Howeve ...

htmlcsswordpressscreen

The correct rendering of background image paths is not functioning properly

Currently, I am utilizing Django Compress to streamline the process of using fewer files in their original format, rather than converting them to CSS files. This method has been successful except for a minor issue with translating the paths for background ...

cssdjangobackground-imageless

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Utilizing facebox, I am initiating a small modal dialog with a form and attempting to retrieve the value from a text field on that form using javascript. Below is the HTML code: <div id="dialog-form95" style="display:none"> <div class="block"> ...

javascripthtmlcssgetelementbyidfacebox

Ways to customize the size of a radio button with CSS

Is it possible to adjust the size of a radio button using CSS? ...

htmlcssradio-button

The vertical spacing in Font "bottom-padding" appears to be larger than anticipated

Recently, I purchased the font Proxima Nova for my project and I am encountering issues with vertical alignment. Despite setting margins, line-heights, and padding to match those of Arial, the results are not consistent as the Proxima Nova appears misalign ...

htmlcssfontsless

Learn how to hide elements on print pages conditionally in Vue.js using CSS or JavaScript

I am currently using the Vue framework to work on printing webpages for my application. I have an issue that needs a solution, which I will explain below. <template> <div id = "intro" style = "text-align:center;"> <div ...

javascriptcssvue.js

The sliding hamburger menu children fail to move in unison with the parent

I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div. You can see how it currently loo ...

htmlcssreactjstypescript

The Div element containing the rollover button/picture is failing to resize properly as the window is decreased in size

Whenever I try to resize my browser window in Firefox or Chrome, the div ends up moving instead of resizing. I've searched on stackoverflow for answers but haven't found any solutions yet. Can someone please help me with this issue? Here is what ...

htmlcssdreamweaver

The div content is aligning at the baseline rather than the middle

The social icons on my website are currently displaying at 40x40, with the text appearing below them. I am looking to center the text within the icons themselves. Any tips on how I can achieve this? Your help is much appreciated! Check out the fiddle here ...

css

Simple steps to dynamically alter CSS styles according to the current URL

I am working on a website where I want users to be able to change the background image and other CSS elements. Currently, my approach is to have multiple HTML pages that users can switch between using a dropdown menu and reload the page. For example: hre ...

phphtmlcss

transforming a table into a stylized CSS design

Seeking assistance in converting a table into CSS as I am new to CSS: <table dir="ltr" width="500" border="0" align="center"> <caption><font face="Helvetica">Movies</font></caption> <colgroup width="50%" /> ...

htmlcss

How can I make a div's height match that of another div?

I am curious about adjusting the height of a div based on its content. In this case, I have the following HTML structure: div.Pantalla { background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg"); background-size ...

htmlcssangular

Embedding Google+ Sharing in an iframe

I'm currently working on a web application that needs to be compatible with PC, tablets, and mobile phones. I'm interested in integrating Google+ Sharing into the app. However, it appears that when using the url , there are issues with blocking ...

javascripthtmlcssiframegoogle-plus

Is it possible to ensure a div occupies all available space within a column using the vh-100 class in bootstrap?

In the <div class="bg-primary"></div> element, I'm trying to make it take up the remaining empty space without exceeding the vh-100. I've experimented with various solutions but haven't been able to find a fix yet. b ...

javascripthtmlcssweb-scrapingbootstrap-5

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

Our website is optimized for use on Android tablets. I have added the following CSS to the input's class: text-transform: uppercase; While this successfully displays typed letters in uppercase, it does not change the appearance of the on-screen keyb ...

asp.net.nethtmlcsshtml-input

including a code snippet within a dropdown menu or embedding it in a clickable button

Hey there, my name is Wouter Sanders and I am currently learning to code! I recently finished creating a RAL color picker for a project I'm working on. The only issue I've run into is trying to embed the code in a menu or button so that it doesn ...

javascriptjqueryhtmlcss

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

javascriptcsswebreactjsstyling

I desire to incorporate a subtle fading effect into the script

I have written the script code and now I am looking to add a fade effect to it. Can anyone guide me on how to achieve this? Your help is much appreciated! ※I used an online translator as English is not my native language. Please bear with any awkward ph ...

javascripthtmljquerycss

Tips for positioning an MUI element inside a container to extend to the edge of the browser window

Currently, I'm working on a project with a Material-UI (MUI) container that contains a Stack element. Within this Stack, there are two Box elements displayed in a row, each set to take up 50% of the width. In my design, I want the second box to break ...

htmlcssreactjsmaterial-ui

The functionality of Bootstrap v4 push and pull grid classes seems to be failing to meet expectations

In the process of developing a web application, I am using Bootstrap v4 (alpha 3) to create a responsive layout. Most elements are working well, however, I am facing difficulties rearranging my cards using the push and pull classes in Bootstrap. The intend ...

htmlcsstwitter-bootstrapbootstrap-4