Adding class to style?
Question
Hello, sorry if this was asked before but i searched and couldnt find anything re this.
How would i reference a component (textbox) under content to a default unique class instead of having to type the css attribute one by one?
e.g. (not working) below, input-control is the class.
id: 'email',
label: 'email',
category: 'Extra',
attributes: {class:'fa fa-map-o'},
content: {
type: 'input',
style: {class: 'input-control'}
},
tried every possible permutation e.g. style: {'.input-control'}, putting another attributes tag, or class: {'input-control'} but editor doesn't load when any of this is done. Sorry for the trouble and thanks in advance.
Answers (2)
Use classes key
...
content: {
type: 'input',
classes: ['class1', 'class2', ...],
// Inside style you put inline styles
style: {'text-align': 'center', ....}
}
...
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1683
How to change id/class when new element drop on editor or render element with dynamic ip?
Hello @artf , Hope you are doing well. I have two questions regards dynamic blocks adding, 1) Is it possible to render the block with dynam...
Issue #1471
[Question] Blockmanager and Image
Hi! I use this code to add a new block: blockManager.add("image", { label: 'Image', category: 'Basic', attributes: { class: "gjs-fonts gjs-...
Issue #634
How can I pass content with script?
I made custom component like this way and used script as well then script is working fine but I am not able to select component. Is there a...
Issue #555
Add external script in script while creating new component
Hello @artf How can I pass external script link while creating a component? like this way, bm.add('test-block2', { label: 'Test block2', at...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.