webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Editor doesn't left align on numbers which are left-aligned #119

Open dsl101 opened 8 years ago

dsl101 commented 8 years ago

Sorry, I know this should probably be a pull request, but I just made a fix locally (not in a repo), and the patch is small, so I thought I'd post it here in case it helps.

The specific case is that I wanted numbers to be left aligned like everything else, so I changed the css like this:

td.number {
    text-align: left;
}

But the editor seems hard-coded to assume numbers are right-aligned, and so it opens in the wrong place. I fixed editablegrid_editors.js by putting a guard around the right-alignment code to check the element style is actually right aligned like this:

@@ -148,9 +148,11 @@

        // if number type: align field and its content to the right
        if (this.column.datatype == 'integer' || this.column.datatype == 'double') {
-           var rightPadding = this.editablegrid.getCellX(element) - offsetScrollX + element.offsetWidth - (parseInt(editorInput.style.left) + editorInput.offsetWidth);
-           editorInput.style.left = (parseInt(editorInput.style.left) + rightPadding) + "px";
-           editorInput.style.textAlign = "right";
+           if(window.getComputedStyle(element, null).getPropertyValue("text-align") == "right") {
+               var rightPadding = this.editablegrid.getCellX(element) - offsetScrollX + element.offsetWidth - (parseInt(editorInput.style.left) + editorInput.offsetWidth);
+               editorInput.style.left = (parseInt(editorInput.style.left) + rightPadding) + "px";
+               editorInput.style.textAlign = "right";
+           }
        }
    }