Skip to Content (Press Enter)
Back to Ideas
2
Like
Follow Idea
Have the WYSIWYG reflect styles that include input parameters
678Views
0Comments
On our RadarOn our Radar
Frontend (App Interfaces)
Say I have a web block with a single container in it.  I want the background of that container to change between a few different colors.

I have a style called "blue", defined in the theme:
   .blue { background-color: blue; }

I would like to pass this color style name to the web block as a parameter, so I can style the background color of the container dynamically.  I made a text input parameter on the web block called "Color".  In the Exteded Properties of the container in the web block, I put "class" as a key and "Color" as a value:



Then I go to my web screen, drag over the web block, and put "blue" in as the Color input parameter:



Unfortunately, the WYSIWYG editor is not passing "blue" to the web block.  In the browser the container shows up as blue, but in the WYSIWYG the style is not applied:



It seems to be the parameter that is causing this issue.  If I manually type in the literal string "blue" instead of using the parameter, or if I use the Style property instead of the Extended Properties panel, then the blue style is processed and the WYSIWYG editor shows the blue background on the container:




For something like "background-color", this issue is not huge, but for other styles (such as positioning styles), this can be problematic as the WYSIWYG editor is not displaying what the actual website looks like.
27 Mar 2015
Copy link to comment