Issue #1320πŸ’¬ AnsweredOpened July 25, 2018by Moikapy0 reactions

+ GJS Plugin; Issues using the data-tab attribute

Quick answerby artf

Hi @Moikapy, can you provide a minimal live demo of the issue, please?

Read full answer below ↓

Question

Hello had an issue using the data-tab attribute with my elements.

We were creating a tab that made use of the attribute allowing it to swap between the contents, and when rendered onto the page the data-tab attributes are changed from their original value to a 1. This change then returns an error saying that this isn't the correct selector.

Will post more information as it is found/requested.

Answers (3)

artfβ€’ July 26, 2018

Hi @Moikapy, can you provide a minimal live demo of the issue, please?

Moikapyβ€’ July 26, 2018

Example Video: https://youtu.be/0cD3fzWdnHk

Another thing I'm trying to figure out is how to keep GrapesJS from stripping the data-gjs-type attributes as well wen using the setComponent Function.

artfβ€’ July 27, 2018

You're using incorrectly the template. You should place attributes like data-tab and data-tab-container without assigning any value, those are used internally by JS to understand where pieces are placed

<nav data-tab-container>
        <a href="#tab1" data-tab>Tab 1</a>
        <a href="#tab2" data-tab>Tab 2</a>
        <a href="#tab3" data-tab>Tab 3</a>
      </nav>

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.