diff --git a/src/css/group.css b/src/css/group.css
index fe89006a..97ae107a 100644
--- a/src/css/group.css
+++ b/src/css/group.css
@@ -82,9 +82,8 @@
 
 .group-name-text {
   margin-bottom: 0;
-  padding-right: 1em;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: hidden;
   white-space: nowrap;
 }
 
diff --git a/src/js/control.js b/src/js/control.js
index 468f532a..88366339 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -2826,6 +2826,7 @@ var control = (function() {
     path: "group.name.show",
     type: "checkbox",
     func: function() {
+      link.groupAndItems();
       render.class();
       render.dependents();
     }
diff --git a/src/js/link.js b/src/js/link.js
index d6920be3..01d99f20 100644
--- a/src/js/link.js
+++ b/src/js/link.js
@@ -380,10 +380,12 @@ var link = (function() {
       });
       var groupControl = helper.node("div|class:group-control form-group");
 
-      groupName.appendChild(groupNameText);
       groupHeader.appendChild(groupControl);
-      groupHeader.appendChild(groupName);
       group.appendChild(groupHeader);
+      if (state.get.current().group.name.show) {
+        groupName.appendChild(groupNameText);
+        groupHeader.appendChild(groupName);
+      };
 
       var groupBody = helper.node("div|class:group-body");
       group.appendChild(groupBody);