Readonly field in panel?


just realized while building a new functionality for a client site that in Kirby 3 the disabled: true option is the only one available to avoid content editing in the panel.

Now unfortunately, this option removes the ability to select the values from the fields. This worked with readonly.

Is there an option to replicate / build the readonly state easily myself or is there a chance to get back a functionality that prevents editing the content but lets users select text?

My use case for reference is a virtual page that shows content from a mysql database. The goal is to show the content in the panel and people can select/copy it from there but cannot edit it (readonly database).

Thanks for suggestions/discussion about it or anything else. :slight_smile:

Just an idea: Since the pages are virtual, instead of disabling editing of fields or the complete page, you could overwrite the writeContent() function to not do anything instead.

Thanks, I’ll consider this. From user experience it’s not the best option as people think they could edit but then nothing happens…

Do you know what the reason for disabling copy/text selection was/is in the Kirby option? For the webstandard, disabled isn’t in the latest standard anymore but only readonly. I guess it’s because it should always be selectable but just not interactive?

No, I don’t remember why that decision was made. Maybe you can overwrite the Panel styles to at least make text selectable (even though that wouldn’t restore full readonly functionality, but at least make text selectable).

And create a feature request in the feedback channel:

I suggested Disabled Panel fields should be selectable · Kirby Feedback now, thanks for the reminder. Second, I’ll try to do that and update the topic here so others can see the quick fix as well.

First, add this to your site/config.php:

    'panel' => [
            'css' => 'assets/css/custom-panel.css'

Then create that file in your filesystem and add the following statement:

.k-page-view .k-field[data-disabled] * {
  pointer-events: auto;
  cursor: text;

This allows copy actions from users again and shows the correct cursor for that.

1 Like