Issue #3606💬 AnsweredOpened July 9, 2021by Palash-Mandal0 reactions

question components style-manager typescript

If I use float from alignment float not clear that's why design issue occur.

Quick answerby artf

Please follow the issue template

Read full answer below ↓

Question

Hello @artf ,

There a generic issue when try to create a layout using float form alignment.

The issue is float not clear automatically.

how do I add new class in row when user set flow value float left /right

<div data-gjs-type="default" draggable="true" data-highlightable="1" class="row" id="iroj"><div data-gjs-type="default" draggable="true" data-highlightable="1" class="cell" id="i3qv"><img data-gjs-type="image" draggable="true" id="iomk" src="https://images.unsplash.com/photo-1544526226-d4568090ffb8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aGQlMjBpbWFnZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80" class="gjs-selected" width="300"></div><div data-gjs-type="default" draggable="true" data-highlightable="1" class="cell" id="icg6"><h1 data-gjs-type="HEADER-COMPONENT" draggable="true" data-highlightable="1" id="iea5" contenteditable="false" class="">Insert your heading</h1></div></div>

I wants to set a new class in parent div class row to clear float using css like below image as shown.

Answers (2)

artf• July 27, 2021

Please follow the issue template

ClaudeCode• May 17, 2026

Thanks for reporting this, @Palash-Mandal.

Great question about if I use float from alignment float not clear that's why design issue occur.. The recommended approach with StyleManager is to use the event-driven API.

Start here:

Check the GrapesJS documentation for your specific module
Look for the on() event listener method
Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

Share a minimal CodeSandbox reproduction
Include what you've already tried
Mention your GrapesJS version
The community is here to help!

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 →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

If I use float from alignment float not clear that's why design issue occur.

Question

Answers (2)

Related Questions and Answers

[QUESTION] How to create custom block made of grapesjs components?

Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?

CSS added via custom code persists after custom code component is removed

Deleting a component without deleting its corresponding style

Paid Plugins That Match This Issue

Related tutorials

Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live

GrapesJS vs Webflow vs Tilda: What to Choose for Your Business in 2026

GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery

Browse Plugin Categories