How to remove empty space on the left of jsTree contextMenu - asp.net-mvc

Question

I'm using jsTree plugin in my ASP.NET MVC application and have a strange issue. I've attached contextMenu plugin, but its items have a strange empty space on the left, like in the image below:
My code is followed:
$(function () {
$("#competence-areas-tree").jstree({
core: {
data: {
cache: false,
url: '#Url.Action("GetTreeData", "CompetenceArea")'
},
multiple: false
},
types: {
competenceArea: {
icon: "#Url.Stylesheet("/jstree-3.0.0b/competenceArea.png")"
}
},
contextmenu: {
items: function ($node) {
return {
createItem: {
separator_before: false,
separator_after: false,
label: "Создать",
submenu: {
create: {
separator_before: false,
separator_after: false,
label: "Создать на текущем уровне",
action: function() {
Create($node.parent);
}
},
createChild: {
separator_before: false,
separator_after: false,
label: "Создать потомка",
action: function() {
Create($node.id);
}
}
}
},
editItem: {
separator_before: false,
separator_after: false,
label: "Редактировать",
action: function() {
Edit($node.id);
}
},
deleteItem: {
separator_before: false,
separator_after: false,
label: "Удалить",
action: function() {
Delete($node.id);
}
},
detailGraphItem: {
separator_before: false,
separator_after: false,
label: "Перейти к графу",
action: function() {
DetailGraph($node.id);
}
}
}
}
},
plugins: ["types", "contextmenu", "themes"]
}).on("changed.jstree", function(e, data) {
if (data.action === "select_node") {
OnSelectingNode(data.node.original.id);
}
});
});
Thank you!

Answer 1

Hmm I made a jsfiddle for the context menu you have provided but there isn't anything wrong with it. There is always a default space to the left with the context menu in the jstree but not to the extent that you're having. Here is the jsfiddle to see if that can help:
http://jsfiddle.net/3q9Ma/529/
$(function () {
var data = [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
];
$("#jstree").jstree({
"core" : {
"check_callback" : true,
"data": data
},
"plugins" : [ "contextmenu", "dnd"],
contextmenu: {
items: function ($node) {
return {
createItem: {
separator_before: false,
separator_after: false,
label: "Создать",
submenu: {
create: {
separator_before: false,
separator_after: false,
label: "Создать на текущем уровне",
action: function() {
Create($node.parent);
}
},
createChild: {
separator_before: false,
separator_after: false,
label: "Создать потомка",
action: function() {
Create($node.id);
}
}
}
},
editItem: {
separator_before: false,
separator_after: false,
label: "Редактировать",
action: function() {
Edit($node.id);
}
},
deleteItem: {
separator_before: false,
separator_after: false,
label: "Удалить",
action: function() {
Delete($node.id);
}
},
detailGraphItem: {
separator_before: false,
separator_after: false,
label: "Перейти к графу",
action: function() {
DetailGraph($node.id);
}
}
}
}
}
}).on('create_node.jstree', function(e, data) {
console.log('saved');
});
$("#sam").on("click",function() {
$('#jstree').jstree().create_node('#' , { "id" : "ajson5", "text" : "newly added" }, "last", function(){
alert("done");
});
});
});