Styles panel is empty

@TomD, what isn’t working on the CSS Panel for you? It all appears to be working fine for me on a Mac.

That sounds great. Obviously there is a danger that someone would style their whole site using this panel - and the resulting code would be a mess. I think it’s useful to use inline styles temporarily sometimes (and sometimes not temporarily), so it would be nice if there were an option to use the inline style option and then move the styles to a file later (IMO anyway).

I think you misunderstood my use of “old”. I meant the styling feature which was there before (the styles panel). It also seems to be a thing of the past (old) - because it’s disappeared:

(which I understand is not how it’s meant to be)

What is the currently selected element @TomD ?

It’s the same problem whatever I select, eg a table cell:

I’ll play around/restart etc. to see if I can get it to appear. I initially thought it was a choice of using the new panel or the old - ie not at the same time. I’m glad that’s not the case.

Seems there is an error in parsing your css somehow. - Check the output panel below for errors.
See if it happens only on specific elements, try different pages maybe? Other projects?

On some files I can see styles - others not. I can’t see a pattern. Here’s a file which won’t show the styles panel:
bootswatch_components.zip (9.7 KB)
I didn’t create the file - I just put into into Wappler as an example. Some of the elements are not recognised by Wappler. Perhaps that’s the issue.

I thought there was no output, but then noticed the error text below. I’m not sure exactly at what point it appeared. In case it gives a clue:

TypeError: Cannot read property ‘tab’ of null at e.loadAppCreatorPageData [as dataProvider] (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/dmxAppConnect_utils.js:309:25) at a.jstree.plugins.stackedicon.core.data (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/w2ui/w2dw/w2jsTree.js:8:1960) at a.jstree.plugins.stackedicon._load_node (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jsTree/jstree.js:7:16398) at a.jstree.plugins.stackedicon.load_node (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jsTree/jstree.js:7:14979) at a.jstree.plugins.stackedicon.refresh (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jsTree/jstree.js:8:16274) at a.jstree.plugins.stackedicon.refresh (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jsTree/jstree.js:10:24531) at HTMLDivElement. (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jsTree/jstree.js:7:2018) at Function.each (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jQuery/jquery-2.2.0.min.js:2:2773) at n.fn.init.each (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jQuery/jquery-2.2.0.min.js:2:845) at n.fn.init.a.fn.jstree (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/jsTree/jstree.js:7:1942) at e.refresh (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/w2ui/w2dw/w2jsTree.js:8:802) at reloadTree (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppConnect/UI/dmxAppConnect_utils.js:44:22) at requestAnimationFrame (chrome-extension://fjjllfpmlaejicjkpknbdicdakiijgjp/Shared/DMXzone/dmxAppCreator/UI/w2editor_designView.js:8:17024)

I have improved the styles parser, it will be in the next update. The styles panel does not show any content when it could not load one of the stylesheets. This happens when it references a stylesheet that does not exist (was deleted) or when you have an unsaved document with relative paths to the stylesheets.

Great - thanks Patrick.

Or in cases like these, you could perhaps give an error message rather than making allowances for user error - eg in the case of a missing style sheet.

Yes we are also looking for better ways to inform the user if some files are missing.
It happens often that images are not present or js or css files not included or have wrong paths.
Maybe a simple centralized errors list coming from design view rendering will be nice.

1 Like

That would be really useful.