Changing the CSS of autocomplete

1

Hi

I am trying to change the CSS of the autocomplete when I change the themes of the editor. Currently in my CSS section “.CodeMirror-hints” allows me to add the relevant styling to autocomplete and it works. When I add “.cm-s-neo .CodeMirror-hints” autocomplete does not work.

Thank You

2

The hint dialog is appended to the document body, so it’s indeed not a child of the CodeMirror wrapper.

1 Like
3

Hi Marijn

Thank You for your reply.

If I need to implement this feature how can I go about making the relevant change? So that the css of the hint dialog changes in comparison to the change of themes. Would I need to create another instance of .CodeMirror-hints and give it another id/ class and what would I need to include in the selectTheme method?

Thank You

4

You might be able to use the container option to showHint (also settable through the hintOptions editor option) to select a new parent element for the hint dialog.

5

Hi Marijn

I hope you are well

Apologies for the delay.

So now I am using a container option to “showHint”:

editor.on("keyup", function (editor) {
    var containerShowHint = document.body;
    if (!editor.state.completionActive) {
CodeMirror.commands.autocomplete(editor, null, {completeSingle: false,container: containerShowHint});
    }
});

However when in the CSS, how should I include the container to be the new parent element for the hint dialog ? I tried the following, but autocomplete does not popup when I change the theme to “neo”.

	.cm-s-neo .containerShowHint .CodeMirror-hints {
		position: absolute;
		z-index: 2;
		overflow: hidden;
		list-style: none;
		cursor: default;
		margin: 0;
		padding: 2px;
		background: #322140;
		max-height: 20%;
		overflow-y: auto;
		color: #A5A7A3;
	}

Would I also need to add anything to my select theme method to make “containerShowHint” child of Themes?

	function selectTheme() {
		var theme = input.options[input.selectedIndex].textContent;
		editor.setOption("theme", theme);
		location.hash = "#" + theme;
	}
	var choice = (location.hash && location.hash.slice(1)) ||
	(document.location.search &&
	decodeURIComponent(document.location.search.slice(1)));
	if (choice) {
		input.value = choice;
		editor.setOption("theme", choice);
	}
	CodeMirror.on(window, "hashchange", function() {
		var theme = location.hash.slice(1);
	if (theme) { input.value = theme; selectTheme(); }
	});

Thank You