Merge pull request #870 from JuanTincho/Large-block-label

Hide large labels on blocks
GrapesJS · Feb 18, 2018 · 4079db9 · 4079db9
2 parents 50cc585 + c23c951
commit 4079db9
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js
@@ -70,7 +70,7 @@ module.exports = Backbone.View.extend({
     const className = `${pfx}block`;
     const label = this.model.get('label');
     el.className += ` ${className} ${pfx}one-bg ${pfx}four-color-h`;
-    el.innerHTML = `<div class="${className}-label">${label}</div>`;
+    el.innerHTML = `<div title="${label}" class="${className}-label">${label}</div>`;
     hasDnd(this.em) && el.setAttribute('draggable', true);
     return this;
   }

diff --git a/src/styles/scss/_gjs_blocks.scss b/src/styles/scss/_gjs_blocks.scss
@@ -31,7 +31,7 @@
   width: 45%;
   padding: 1em;
   box-sizing: border-box;
-  height: 90px;
+  height: 103px;
   cursor: all-scroll;
   font-size: 11px;
   font-weight: lighter;
@@ -71,6 +71,8 @@
   font-size: 0.65rem;
   font-weight: normal;
   font-family: Helvetica, sans-serif;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .#{$app-prefix}block.#{$app-prefix}bdrag {