Ace editor cursor position has space between expected position and the current position

Hi,

I have used Ace editor a few times in my previous projects. Never did I face this problem before of having my cursor misplaced in my Ace editor. Let me guide you step by step

Editor markup

Here is a markup where I want my Ace editor to show up.

Then I have this CSS that applies to the editor element

CSS

Above CSS allow my editor to take entire space within the document body or relatively positioned container.

Then comes the Javascript to do its magic

Now the editor will show up and I am able to do my thing. However I now have a unique issue where when I start to type the cursor position is a bit far from the text, so basically I have a gap between the expected and actual cursor position in my Ace Editor as shown below

capture

It turned out that Ace editor must use monospace font and I was setting fonts on a not so recommended way as shown below

Just to check things out and enforcing my editor to use monospace font fixed the issue instantly. This is what I changed my styles for my editor instance to which solved it.

I also ended up cleaning the way I was applying my fonts to all my elements by getting rid of * construct.

I hope this helps

 

How to activate or enable color themes in bash scripts or other languages in Nano editor

nano

Bored of looking at that black and white text for a while? You would want to enable or activate color themes in Nano editor which is really easy to do. There are many languages supported for color theming within nano, such … [Continue reading]

W3C CSS3 and W3C HTML5 Badge Logos in SVG

Hi Guys, Here are some couple of logos that may come handy when you need them. Bookmark this page if you like because sometimes things become rather hard to find. CSS3 SVG Logo       HTML5 SVG … [Continue reading]

Online webpage to image conversion with ImgCake.com includes API

Hi Guys, I thought I would inform that there is a new tool available for taking screenshots of webpages called imgcake.com Talking about features there are many Unlimited renders/month High quality renders Custom window and shot … [Continue reading]

CommandLine Convert WMF, EPS etc to SVG using inkscape

Hello, I thought this might be a good tip to share for people who are looking to convert their vector images to SVG format. inkscape is the right tool just for that. Get inkscape from their website https://inkscape.org/en/ for you operating … [Continue reading]

Installing New Comodo Positive SSL Certificate on Apache and OpenSSL on Centos, Fedora and RedHat

positive-ssl

Hello, I had to buy a certificate and install it on my new server I was issued with a new certificate by Comodo under Comodo Positive SSL. To start with I think it doesn't matter which certificate you choose, end of the day they all follow … [Continue reading]

Rackspace Cloud FIles Bulk Delete objects prefixed/* wildcard php sdk

Hi Guys   Rackspace cloud files is an awesome file storage system, We upload a file and can make it publicly available through their CDN. While I use Cloud files in pretty much all my projects at work or personal stuff, one thing that I … [Continue reading]

Australian suburb boundaries database released

Hello Its been a great pleasure for me to release Australian suburb boundaries database, A suburb boundary is represented in a polygon of longitude and latitude points. More details can he found on product page which is located here Product … [Continue reading]

How to make xml_split, xml_merge, xml_pp, xml_grep, xml_spellcheck under XML-Twig tools work on Windows

XML twig

Large XML files could sometimes lead to overall slowness of your program. Thus it makes sense to sometimes split them to rearrange contents within to optimize querying your XML files. This post will touch base on how to split a large XML file on … [Continue reading]

Yii Framework Apply Custom layout to a controller or action

If you are using Yii PHP framework you are using one of the fastest PHP frameworks around. Sometimes there are minor things that we want to do and couldn't find a document that is to the point and precise in what you are looking after. This Quick … [Continue reading]