Change placeholder into kanban textarea

Ask for Help
1

Hi,

I was wondering if it was possible to change the text of this textarea inside a kanban, using some CSS, please.
See the photo below.

Thank you in advance!

image

2

Are you on the newest paid plans and have access to CSS?

3

Yes, I’m on the newest paid plans and have access to CSS.

Do you know how to do it in these conditions @ThinhDinh ?

4

With CSS, you cannot replace the placeholder text; you can only style its properties. In other words, you can hide it.

5

Oh ok, thank you for your answer @Himaladin.

Do you have the code to hide it then, please?
I prefer hide it since the placeholder text will confuse my users…

6

class name: kanban-plcholder

.kanban-plcholder textarea::placeholder {
  color: transparent;
}
7

If you want to hide everything: input or textarea.

.kanban-plcholder textarea::placeholder, .kanban-plcholder input::placeholder {
  color: transparent;
}
8

Thank you @Himaladin. It is working fine.
It’s unfortunate that we can’t change the text, but it’s better than nothing.

1 Like
9

Do you want a workaround where text can be provided but it is not part of the textarea?

Screenshot 2024-07-10 at 15.06.37

10

What do you mean by it is not part of the textarea? Not sure I understand your point.

The best solution for me would be to replace the “description” text that you can see on my image by another “B” text for example.

11

If it doesn’t refer to the same element, there is a possibility that the CSS will be unstable, for example regarding distance or how to respond to an unexpected condition. You can try it and don’t force it to work perfectly. This is a little complex.

.kanban-plcholder textarea::placeholder {
  color: transparent;
}
#page-root:has(.kanban-plcholder textarea) .kanban-plcholder  .component-root > div > div > div > div > div:nth-child(2):has(textarea) > div:before {
  content: "Input here";
  position: relative;
  left: 10px;
  top: 45px;
  color: red;
  height:0;
  opacity: 0.4;
  font-weight: 500;
  pointer-events:none;
}

/* Hide when focus or empty*/
#page-root:not(:has(.kanban-plcholder textarea:empty)) .kanban-plcholder  .component-root > div > div > div > div > div:nth-child(2) > div:before {
  content: "";
}
2 Likes
12

Perfert ! Thank you a lot @Himaladin.
It is exactly what I want.

1 Like
13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.