Edit CSS/HTML editor cursor offset makes it unusable due to CSS font override

I’m a first time user of Discourse, having inherited the administration of the site from another coworker. As I’m working through a backlog of UI requests I’m noticing that the editor to make these changes is almost unusable.

By that I mean when I place my cursor at a spot to edit a character, I wind up editing a character a dozen or more characters to the left of where my cursor is. Here’s a visual…

I’ve clicked the end of the line, yet my cursor shows almost an inch to the right (in white space) yet if I clicked backspace the semicolon is deleted. I can get around this by copying the content out to my text editor, updating the code there, and pasting it back in. This CAN’T be the intended behavior, but I have no idea why this is happening. Is this editor a plugin?

According to the meta tags I’m running Discourse 2.4.1, and I’ve been told we’re hosted by Discourse as opposed to hosting our own version.

Not sure why that would happen. I’ve never seen it. My best guess is something in your theme is broken. You might try safe-mode (https://yoursite/safe-mode). Also, if you have much theme cruft to clean up, you should definitely check out Discourse Theme CLI (console app to help you build themes) so you can just work in your favorite editor the way that God intended.

4 Likes

Are you sure? If you are on our hosting you’d be on the current beta (2.5). I suggest digging a bit deeper. Does your admin control panel mention us?

I’m wondering that myself actually Jeff. Where would I go to determine whether we’re hosted by Discourse or ourselves?

Here’s some details:

$whois eventtribe.com
Name Server: DNS1.P05.NSONE.NET
Name Server: DNS2.P05.NSONE.NET
nserver:      A.GTLD-SERVERS.NET
nserver:      B.GTLD-SERVERS.NET

$ ping eventtribe.com
PING eventtribe.com (198.7.63.115): 56 data bytes
1 Like

If you were hosted by CDCK your name would resolve to a cname pointing to their domain. It’s a good bet that you are self-hosted . . . somehow. Perhaps this will give you a clue: 198.7.63.115 IP Address Geolocation Lookup Demo | IP2Location, but maybe not.

1 Like

I can assure you Discourse doesn’t host www.eventtribe.com.

5 Likes

:smiley: I imagine you’d know then wouldn’t you?

Is Sam’s post the best place to start reading about upgrading?

1 Like

Aha. Checked with my marketing team lead and it turns out that we’re hosted with https://www.discoursehosting.com/.

I know nothing about this company, is there anything I should know? :smiley:

I’ll put in a ticket with them to ask about the editor issue.

5 Likes

They are good people, they post here often and we support each other :handshake:

More Discourse = More Bettererish

4 Likes

That’s really good to hear Jeff, thanks!

1 Like

I took the liberty of taking a look at this. It is caused by the Lato font which is being inserted by the “Fonts” theme component and applied to all elements (*). It is not a fixed width font and apparently the editor does not work well with that. Using /safe-mode works around the issue.

The actual cause is that you are applying that font to all elements by using the * selector. If you change this to html then you get the regular CSS inheritance and specificity back and your editor will get the correct font.

5 Likes

Thanks Michael! I want to preface this by saying that I inherited this from a previous coworker. :smiley:

I did as you suggested and you’re right, it does indeed fix it. I will say I’m a bit surprised that you can make CSS changes and have them pulled into the settings area. But what you suggested makes total sense. Thanks again for your time!

1 Like

Me too actually - it didn’t use to be like that as far as I can remember.
OTOH * is a really evil selector.

2 Likes