BUG: almost all examples from this page fail with grapejs
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Version 103.0.5060.134 (Official Build) Built on Ubuntu , running on Ubuntu 18.04 (64-bit)
Reproducible demo link
https://alvarotrigo.com/blog/html-css-tabs/
Describe the bug
Not switching/showing tab contents when testing any of the examples listed at https://alvarotrigo.com/blog/html-css-tabs/ Like this one "4. Animated HTML & CSS Tabs" ready to import shown bellow:
<body>
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">Tab One</label>
<div class="tab-content">My father had a small estate in Nottinghamshire: I was the third of five sons. He sent me to Emanuel College in Cambridge at fourteen years old, where I resided three years, and applied myself close to my studies; but the charge of maintaining me, although I had a very scanty allowance, being too great for a narrow fortune, I was bound apprentice to Mr. James Bates, an eminent surgeon in London, with whom I continued four years. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Tab Two</label>
<div class="tab-content">My father now and then sending me small sums of money, I laid them out in learning navigation, and other parts of the mathematics, useful to those who intend to travel, as I always believed it would be, some time or other, my fortune to do. </div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Tab Three</label>
<div class="tab-content">When I left Mr. Bates, I went down to my father: where, by the assistance of him and my uncle John, and some other relations, I got forty pounds, and a promise of thirty pounds a year to maintain me at Leyden: there I studied physic two years and seven months, knowing it would be useful in long voyages.</div>
</div>
</div>
<p>Example line outside of tab box</p>
</div>
</body>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans";
background: #2c3e50;
color: #ecf0f1;
line-height: 1.618em;
}
.wrapper {
max-width: 50rem;
width: 100%;
margin: 0 auto;
}
.tabs {
position: relative;
margin: 3rem 0;
background: #1abc9c;
height: 14.75rem;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
float: left;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
display: block;
line-height: 2.75em;
height: 3em;
padding: 0 1.618em;
background: #1abc9c;
border-right: 0.125rem solid #16a085;
color: #fff;
cursor: pointer;
top: 0;
transition: all 0.25s;
}
.tab-label:hover {
top: -0.25rem;
transition: top 0.25s;
}
.tab-content {
height: 12rem;
position: absolute;
z-index: 1;
top: 2.75em;
left: 0;
padding: 1.618rem;
background: #fff;
color: #2c3e50;
border-bottom: 0.25rem solid #bdc3c7;
opacity: 0;
transition: all 0.35s;
}
.tab-switch:checked + .tab-label {
background: #fff;
color: #2c3e50;
border-bottom: 0;
border-right: 0.125rem solid #fff;
transition: all 0.35s;
z-index: 1;
top: -0.0625rem;
}
.tab-switch:checked + label + .tab-content {
z-index: 2;
opacity: 1;
transition: all 0.35s;
}
</style>
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
After looking around I found this closed issue https://github.com/artf/grapesjs/issues/2873 and based on it I did this to allow checkbox/radio in preview mode:
var editor = grapesjs.init({
...
});
const checkClikcInPreview = function(e) {
if (!editor.Commands.isActive('preview')) {
e.preventDefault();
}
}
let ect = editor.Components.getType('checkbox');
ect.model.getDefaults().copyable = true;
ect.view.getEvents().click = checkClikcInPreview;
And now at least the checkbox/radio works in preview and some demos work in preview.
Would be nice if this info be included in the documentation !
Thanks @mingodad I released a new version of the form plugin and added support for the preview.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4474
BUG: Running in headless mode requires window
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 103.0.5060.134Reproducible demo link...
Issue #5112
BUG: GrapeJS/drag and drop not working for Brave on Linux and Wayland
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.51.110 Chromium: 113.0.5672.77 (...
Issue #4432
BUG: Undo Manager creates Duplicate CSS during custom command
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 103.0.5060.66 (Official Build) (64-bit) (c...
Issue #5046
BUG: is there any way to remove cross svg on selected default value of Float, Position and text-align
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 111.0.5563.147 (Official Build) (6...
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.