Trouble styling the GtkSource completions popup

Platform
,
1

I’m working on adding completions functionality to my app and I’m having trouble styling it properly to match other Gnome apps. By default, it seems to have no styling whatsoever—no border, no shadow, etc.—and just uses the same styling as the GtkSource.View’s text element, as defined in my XML style scheme, making it hard to distinguish between editor and completion popover.

After playing around with CSS, I’ve been able to achieve the following:

Completion-Typesetter
Completion-Typesetter814×350 19.7 KB

.completion {
  border-radius: 0px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  font-family: "Adwaita Sans";
  font-size: 0.8em;
  font-weight: 400;
  min-width: 32em;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;
}
.completion .icon {
  min-width: 32px;
}

This is better than it originally was, but the box shadow doesn’t work, and when I round the border radius, the row’s background extends outside the rounded border—hence why I’ve squared it off. I also can’t seem to change the font-family or the font-size for the row items, which are using the style scheme’s text config.

I’d like to get it styled like the completions popover in Gnome Builder:

completion-builder
completion-builder216×272 6.63 KB

Or like the example from here (sorry, I can’t directly upload more than two images).

(Also notice how the text in the comment at the bottom of the last one wraps properly here but not in my app.)

Does this all need to be implemented manually, and if so, how? And is there any way to hide the “Details” button seeing as I don’t intend to use it?

2

Hi,

You need to call gtk_source_init() at startup. This should fix the styling, and many other potential issues.

Not as far as I know.

3

Thank you. Not calling init() at the right place was an oversight on my part.

I still have the line wrapping issue and would like to hide the display button, but the other UI issues look to be solved.

1 Like
4

I don’t think there is an easy way to hide the “Details” button…

For the wrapping issue, how do you set the text? is there a newline inside?