Forum

Thread tagged as: Problem

Color fieldtype not rendering as expected in admin

Hi there,

When I add a type="color" field to a template it's not rendering as expected. It works in that clicking on it allows you to select a colour and saves it, but the field doesn't display a nice swatch of the selected colour.

It's displaying correctly for the header colour selection in general settings.

The issue appears to be that the input field has the class input-simple applied to it. Removing that class (with dev tools) makes it display as expected.

Here is the code in my template:

<perch:content label="Primary Colour" type="color" id="primarycolour" value="#222222" suppress="true" />

Here's the output in the admin:

<input type="color" id="perch_3_primarycolour" name="perch_3_primarycolour" value="#222222" class="color m input-simple">

Here's a screenshot

This is Runway on Mac/Chrome.

Thanks

Mike
Mike Fallows

Mike Fallows 2 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

Ok, we'll take a look. If it's holding you up, it's trivial to implement your own version in a new field type if you need to.
Mike Fallows

Mike Fallows 2 points

3 years ago

Thanks Drew,

It's early stages of development, but it's key to the design for this particular project (it's a colour forecasting studio!) so I'll take a look at implementing as its own field type.

Cheers
Mike Fallows

Mike Fallows 2 points

3 years ago

Just to follow up in case anyone else runs into this issue. I created a colorcustom field type, here's the code:

class PerchFieldType_colorcustom extends PerchAPI_FieldType
{
    public function render_inputs($details=array())
    {
        return $this->Form->text($this->Tag->input_id(),
                                $this->Form->get($details, $this->Tag->id(), $this->Tag->default(), $this->Tag->post_prefix()),
                                'color',
                                $this->Tag->maxlength(),
                                'color');
    }
}