The editor font is being overwritten (apparently by settings I put into @font-your-face) and it messes up the cursor positioning. To recreate, set a font to "standard text (p, div)" in @font-your-face. It should override the ace editor font.

I've tracked this back to the .ace_editor font rule getting overridden with "p, div" rule. My first attempt--adding "!important" to the .ace_editor font-family rule--did not solve the problem.

However, I was able to get it to work by adding the following line in the middle of the ace.js css definitions:

.ace_editor p, .ace_editor div { font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace !important;}\n

To be precise, I searched for "monospace" in ace.js, which found the .ace_editor rule, and I added that line immediately after the closing brace.

Now the awesomeness of live_css returns. It was really horrible trying to use it with the cursor not lining up right...

I'm not sure if there's a better way to solve this, but I'll create the issue in case it helps. I do realize I could have set the font-your-face settings differently, but it seems to me that this is a case where !important makes sense in the editor's style rules. Or, at least where live_css should find a way to insulate itself from @font-your-face settings.

Comments

guybedford’s picture

guybedford commented

Hmmm... I don't typically use @font-your-face. Are you sure you can't set a less agressive rule?

Any fix sounds like it would be a hack otherwise. Will leave this on and see if there is any other need for this,

guybedford’s picture

guybedford commented
Status: Active » Postponed (maintainer needs more info)
enxox’s picture

enxox commented

Same issue for me.

guybedford’s picture

guybedford commented

Have you tried using the fix that was mentioned?

Mel55113’s picture

Mel55113 commented
Version: 7.x-2.0 » 7.x-2.10
Status: Postponed (maintainer needs more info) » Active

I have/had this same problem w/Live CSS Version 7.x-2.10.

I'm using an Omega based theme. Therefore, instead of applying the original fix (and having to remember that I hacked ace.js) I added the original specification to my theme's global.css file:

.ace_editor p, .ace_editor div { font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace !important;}

This circumvents the problem.

Note that the original fix, i.e., adding the code to ace.js, also works with this release of Live CSS.

Amestar’s picture

Amestar commented

^ Mel55113

This fixed the problem really well. Since it has an important declaration, you can pretty much place it in any CSS file you wish. I say, the !important is justified in this case.

deryck.henson’s picture

deryck.henson commented
Assigned: Unassigned » deryck.henson
Status: Active » Fixed

I adjusted the drupal_add_css() to give the Live CSS stylesheet a much higher weight than any other CSS file would and @font-your-face does not override the fonts anymore. Change is shown in 7.x-2.x-dev release made today.

Be sure to flush all caches.

If you have a theme-based alteration to the ace editor (like in your theme CSS files or template files) it will cease to function. You will need to include the CSS through template.php's preprocess function with 

drupal_add_css('/sites/all/themes/THEME/path/to/cssFile.css', array(
  'group' => 'CSS_THEME',
  'every_page' => TRUE,
  'weight' => 101,
));

I'll leave this open until it auto closes to make sure no one has specific use case issues that still result in the same problem.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.