Sign in Register
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 8 posts 99 karma points
    Nov 02, 2022 @ 07:52
    Jesper Lysgaard
    0

    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
    Matthew Care
    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 8 posts 99 karma points
    Nov 02, 2022 @ 09:07
    Jesper Lysgaard
    0

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

    enter image description here

    Copy Link
  • Jesper Lysgaard 8 posts 99 karma points
    Nov 03, 2022 @ 11:01
    Jesper Lysgaard
    0

    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 8 posts 99 karma points
    Nov 04, 2022 @ 09:36
    Jesper Lysgaard
    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies