BUG: The grapesjs slider buttons, tabs are not working as expected
Question
Version 0.17.19(grapesjs) Version 0.1.5(grapesjs-lory-slider) Version 1.0.6(grapesjs-tabs)
Are you able to reproduce the bug from the demo? No
What is the expected behavior? I should be able to traverse through different slides and tabs when clicked on previous or next buttons and tab names respectively.
Describe the bug detailed When I create a slider in a template and edit it for different slides and view it on grapesjs, then I am able to go through all the slides created. Similarly after creating a tabs block as well, I am able to see the different tabs and content inside. But when I take the html and css code generated to an angular application and try to run it, I am not able to traverse via different tabs or its contents and also slides or contents unlike while creating it on grapesjs.
HTML and CSS generated from grapesjs grapesjs.txt grapesjshtml.txt
Below is the code from my grapesjs file taken from source code. import gjsLorySlider from 'grapesjs-lory-slider'; import gjsTabs from 'grapesjs-tabs'; grapesjs.init({ container: '#gjs', autorender: true, showOffsets: true, fromElement: true, noticeOnUnload: false, forceClass: false, components: '', style: '', plugins: ['grapesjs-template-manager', gjsLorySlider, gjsTabs], pluginsOpts: { 'grapesjs-template-manager': { /* options / }, gjsPluginExport: { / options / }, gjsForms: { / options */ }, gjsNavbar: {}, gjsLorySlider: {}, },
What is the current behavior? The tab buttons and slider previous, next buttons not working at all once I integrate it with my existing set of angular code. The Notworking.png file is the one where there's no content at all although while creating I have the content as can be seen from other two image files. Similarly not able to move to different slides as well.
Are you able to attach screenshots, screencasts or a live demo? I will attach some screenshots and the code files. <img width="960" alt="Notworking" src="https://user-images.githubusercontent.com/43340158/125229896-52dcd080-e2f5-11eb-980e-edff8adbdb97.PNG"> <img width="795" alt="grapesjsslide2" src="https://user-images.githubusercontent.com/43340158/125229901-54a69400-e2f5-11eb-8188-1f8f54ae6620.PNG"> <img width="796" alt="grapesjsslide1" src="https://user-images.githubusercontent.com/43340158/125229902-553f2a80-e2f5-11eb-81bf-d2939801411d.PNG">
Answers (3)
Are you able to provide a reproducible demo, please?
Sorry @artf , I was facing this because of the script tag in the generated html which is of no use in angular component html. How can I use the html generated in angular files if the html contains script tag functions.
@TRIGGEREDcoder if the main issue is solved I'm closing this one. Please open a new Discussion if you have questions
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3305
BUG: (v0.16.41) Button not set as active on click
Version: v0.16.41 Are you able to reproduce the bug from the demo? [ ] Yes [x] No What is the expected behavior? When I click on a button,...
Issue #3295
BUG (v0.16.41): Button component with draggable property is not working properly
Version: v0.16.41 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? When we have a button with...
Issue #3457
BUG: Custom trait input not working
Hi @artf ! Version: 0.17.3 Are you able to reproduce the bug from the demo?[ ] Yes[x] No What is the expected behavior? The input is create...
Issue #3681
BUG: Textable not working with extended text component
Version: 0.17.22 Are you able to reproduce the bug from the demo?[X] Yes[ ] No What is the expected behavior? Should be able to drop a text...
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.