settings and styling grid layout v1032 - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Jesper Lysgaard 7 posts 98 karma points

Nov 02, 2022 @ 07:52

Settings and Styling - Grid layout v10.3.2

Hi, I am trying to use the settings and styles area in the Grid Layout datatype to add a background color. I have added this in the 'styles' section:

[
  {
    "label": "Baggrundsfarve",
    "key": "background-color",
    "view": "colorpicker",
    "value": "",
    "prevalues": [
      {
        "label": "None",
        "value": "#FFFFFF"
      },
      {
        "label": "Lyse Grå",
        "value": "#EDEDED"
      },
      {
        "label": "Mørke Grå",
        "value": "#D2D2D2"
      },
      {
        "label": "Lyse Blå",
        "value": "#A8D1E2"
      },
      {
        "label": "Logo Blå",
        "value": "#637B9E"
      },
      {
        "label": "Lyse Grøn",
        "value": "#B0CE91"
      },
      {
        "label": "Orange",
        "value": "#FF9900"
      },
      {
        "label": "Gul",
        "value": "#FAE678"
      }
    ],
    "config": {
      "useLabel": true
    }
  }
]

It works in the Content section: enter image description here

When added, it renders to this in HTML and is not working: enter image description here

I am obviously missing something - can anybody help?

I have also tried to inject a class in 'settings' instead - that also renders wrong.

Any ideas?

Copy Link

Matthew Care 12 posts 145 karma points c-trib

Nov 02, 2022 @ 09:01
0
Hello,

In your example you have
```
"config": {
  "useLabel": true
}
```
I think that might be your problem since it's using your labels in the circled code.
Copy Link
Jesper Lysgaard 7 posts 98 karma points

Nov 02, 2022 @ 09:07

0

Hello, Thank you. I have tried to remove the 'config'. But same result I'm afraid.

Copy Link

Jesper Lysgaard 7 posts 98 karma points

Nov 03, 2022 @ 11:01

No matter what I try I still get this annoying non-working HTML:

<div class="umb-grid">
                <div class="grid-section">
        <div style="background-color:{
  &quot;value&quot;: &quot;637b9e&quot;,
  &quot;label&quot;: &quot;Logo blå&quot;,
  &quot;id&quot;: &quot;4&quot;
};">
                <div class="container">
            <div class="row clearfix">
                    <div class="col-md-12 column">

It seems that some HTML encoding/decoding is going wrong. It seems that the value from the property editor is being encoded. Is that a bug or am I using the property editor wrong?

Copy Link

Jesper Lysgaard 7 posts 98 karma points

Nov 04, 2022 @ 09:36
100
After struggling a bit with this I found a workaround.

If I use a radiobuttonlist instead of the colorpicker the code renders correct. In the documentation there is no mention that the colorpicker should work - so it probably don't :-) It would be a nice user experience If the usage of the colorpicker was possible - but for now this is fine.
```
[
  {
    "label": "Baggrundsfarve",
    "key": "background-color",
    **"view": "radiobuttonlist",**
    "prevalues": [
      {
        "label": "None",
        "value": "#FFFFFF"
      },
      {
        "label": "Lys grå",
        "value": "#EDEDED"
      },
      {
        "label": "Mørk grå",
        "value": "#D2D2D2"
      },
```
Copy Link
is working on a reply...

Please Sign in or register to post replies