Style Manager Not Working

[pooriamo]

Hi

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

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}')

[pooriamo]

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,
}]);

[VojtechLanka]

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]

@VojtechLanka Thank you