[Bug]: Blocks icons & font size too small to read
Question
Hi,
I am using grapesjs webpage preset plugin to create the webpage builder. But as you can see the icons and font size of the blocks is too small. What could be the issue? They show perfectly fine in the demo here: https://grapesjs.com/demo.html see the size comparison from my local and demo.
<img width="233" alt="Screenshot 2020-02-18 at 11 46 33 AM" src="https://user-images.githubusercontent.com/11045156/74710810-570dd700-5244-11ea-9a03-a21c1348db8e.png"> <img width="256" alt="Screenshot 2020-02-18 at 12 00 08 PM" src="https://user-images.githubusercontent.com/11045156/74711619-42324300-5246-11ea-8f86-8ed26d51416e.png">
Answers (3)
Just fix them with CSS
For some reason the problem was with embedding the GrapesJS editor within a form that was itself enclosed by bootstrap columns. So the space was tight and GrapesJS stylesheet is using rem font unit for fontawesome icons which sets the font size based on the window size. I rendered the GrapesJS on a full page without any bootstrap containers/columns it worked fine.
I am facing issue again with the icon sizes of three blocks check the screenshot. As you can see tooltip, custom code and typed have huge icons and they are not matching the normal size of other icons.
<img width="254" alt="Screenshot 2020-03-02 at 12 54 47 PM" src="https://user-images.githubusercontent.com/11045156/75656113-19b63a00-5c85-11ea-9062-fa185cbcc5c5.png">
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2873
[BUG]: Some form components not working well with Preset Webpage Plugin
Hi, I've noticed that some form components (like checkbox, radio and select) are not working when gjs is initialized with the Preset Webpag...
Issue #1394
[Bug]: Pasting multiple paragraphs aren't editable until Grapes reloads
https://grapesjs.com/demo.htmlIn the double click into the text "All text blocks could..." to trigger editing mode.Paste this text in: The...
Issue #6211
BUG: Too much recursion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 131.0.2 Reproducible demo link htt...
Issue #5729
BUG: editing/replacing the text inside of a link
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v122 Reproducible demo link https:/...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.