Issue #2851Opened June 22, 2020by pooriamo2 reactions

Style Manager Not Working

Question

Hi

When I choose a block and try to change the styles, nothing happens. (I'm using the web preset)

Laravel

Here is my config:

        const editor = grapesjs.init({
            canvas: {
                styles: ['/css/canvas.css']
            },
            styleManager: {
                clearProperties: true
            },
            container: '#gjs',
            fromElement: true,
            height: '100vh',
            width: '100%',
            storageManager: false,

            plugins: ["gjs-preset-webpage"],
            pluginsOpts: {
                "gjs-preset-webpage": {
                    blocks: [],
                    blocksBasicOpts: {
                        flexGrid: true,
                    },
                    navbarOpts: false,
                    countdownOpts: false
                }
            }
        });

        editor.setStyle('html {direction: rtl}')

Answers (3)

VojtechLanka• June 24, 20202 reactions

Had the same problem, adding widthMedia: '' to my custom device fixed it. I think there is some problem when using millimeters in media queries so the styles aren't applied because it thinks your canvas is too big.

pooriamo• June 23, 20200 reactions

It seems that there is a problem with custom device size. When I set default size to desktop, it works.

const deviceManager = editor.DeviceManager;

deviceManager.add('paper-a4', '210mm', {
    height: '297mm',
    name: 'A4',
});

const panelsManager = editor.Panels;

const panelDevices = panelsManager.getPanel('devices-c');
panelDevices.get('buttons').add([{
    id: 'set-paper-a4',
    command: editor => {
        editor.setDevice('A4')
    },
    className: 'fa fa-desktop',
    active: 1,
}]);
pooriamo• June 24, 20200 reactions

@VojtechLanka Thank you

Related Questions and Answers

Continue research with similar issue discussions.

Issue #595

Cannot drag with fast actions

When I move a block on the canvas before showing clone element, editor does nothing. Only move clone of the block symbol.

3 answersUpdated September 18, 2019

Issue #2265

able to fetch my local html file using load url and getting status ok how can i load this fetched url into editor currently im getting blank screen inside editor

here is my code const LandingPage = { html: '', css: null, components: null, style: null, }; this.editor = grapesjs.init({ container: "#gjs...

1 answersUpdated September 14, 2019

Issue #3442

BUG: Error after call `editor.destroy()`

Create editor instance Try destroy Got error

3 answersUpdated May 22, 2021

Issue #4138

Unexpected behavior in style manager

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 1.35.101 Chromium: 98.0.4758.87 (Off...

3 answersUpdated February 16, 2022

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...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders