topic Re: Module color field issue in CMS Development

Module color field issue

tmcmillan99 — Thu, 24 Mar 2022 20:50:07 GMT

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

Re: Module color field issue

tmcmillan99 — Thu, 24 Mar 2022 20:58:11 GMT

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.

Re: Module color field issue

dennisedson — Thu, 24 Mar 2022 21:14:27 GMT

@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 }};"

Re: Module color field issue

tmcmillan99 — Thu, 24 Mar 2022 21:19:59 GMT

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-

Here is the rendered code-

Thanks,

Terry

Re: Module color field issue

tmcmillan99 — Thu, 24 Mar 2022 21:22:10 GMT

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

Re: Module color field issue

dennisedson — Thu, 24 Mar 2022 21:24:57 GMT

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 😜

Re: Module color field issue

tmcmillan99 — Thu, 24 Mar 2022 21:39:29 GMT

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

Re: Module color field issue

tmcmillan99 — Fri, 25 Mar 2022 13:55:02 GMT

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.