Module color field issue

[tmcmillan99]

I added a color field in a custom module so that the user could pick the border color.  However, it is not displaying the hex code selected in the rendered html.

Within the html section of the module, I have the following inline style on a li element that's within a repeatable group-

style="20px solid {{ item.border_clr.color }};"

I get a warning that states "cannot resolve property 'color' in '{{ item.border_clr }}'

I can't figure out what I am doing wrong. Any help would be appreciated.

Thanks,

Terry McMillan

[tmcmillan99 · Accepted solution]

Update - This issue is resolved now. Not sure what caused it to start working except maybe getting the warning corrected and some trial and error. Once I rekeyed the colors on the edit page, it started working.

[tmcmillan99]

Resolved the warning but the color is still not rendering correctly. The previous developer has changed item to subject and I wasn't catching that.

Needed to be - {{ subject.border_clr.color }}

If I inspect the code, the color hex code is not being displayed.

[dennisedson]

@tmcmillan99 ,

Can you post the full code? 

style="20px solid {{ item.border_clr.color }};"

is not valid code. 

should be

style=" border: 20px solid {{ item.border_clr.color }};"

[tmcmillan99]

Hey Dennis-

My bad. That's what I get for rushing the post. I should have copied/pasted the code. Here is the full line-

<li class="w-full lg:w-5/12 p-8 mb-8 bg-white" style="border-left:20px solid {{ subject.border_clr.color }};">

Here is the rendered code-

<li class="w-full lg:w-5/12 p-8 mb-8 bg-white" style="border-left:20px solid ;">

Thanks,

Terry

[dennisedson]

would you be willing to add the full for loop block?

And if you are using the Design Manager, a screenshot of the Module Group with the repeater.  If you are using local dev, could you add the Module Repeater json. 

From the outside, your code looks good.  you could also try adding the {{ subject.border_clr.color }} outside of the for loop and again, in the for loop outside of the style so it should print the value on the screen.

Hard to see all the details from the outside 😜

[tmcmillan99]

I did a |pprint outside the loop and it comes back with "null". 

Here is the for loop code:

  <ul class="list-none w-full md:w-9/12 mx-auto flex flex-row flex-wrap justify-between">
    {% for subject in module.subjects %}
      <li class="w-full lg:w-5/12 p-8 mb-8 bg-white" style="border-left:20px solid {{ subject.border_clr.color }};">
        <a class="p-2" href="{{ subject.subject_link }}">
          <div class="flex flex-col pl-8 pr-4">
            <div class="subject text-xl font-normal flex flex-row items-center pb-1">
              {{ subject.subject_name }}
            </div>
            <p class="text-sm font-medium text-gray-500 py-4">
              {{ subject.subject_description }}
            </p>
            <div class="link-text pt-4 flex flex-row items-center">
              {{ subject.link_text }} <span class="material-icons" style="color:#02ACD6;margin-left:10px;font-size:18px;">arrow_circle_right</span>
            </div>
          </div>
        </a>
      </li>
    {% endfor %}
  </ul>

Let me know if I am missing anything you requested.

Thanks,

Terry

[tmcmillan99]

One other note...a 20px border is being displayed even though there's no hex code. It's defaulting to black.