Hello,
I would like to have a custom styling for my NcTextField in its disabled state, most likely changing its font-color, background-color, and border-color. I am working on a custom Component and using Vue. I’ve tried applying custom class, using :style directly on the component, using css selectors as specific as possible including using classes like input-field–disabled and input-field__input, but nothing seem te be working thus far… Should I be achieving this using Javascript instead of CSS? Can anybody give me a clue?
Another option is to make NcTextField to be in readOnly state, but there doesn’t seem to be any option for that? Only disabled is available?
Thank you in advance…
OK, I have no clue, what you finally want to achieve, so it is hard to give the best solution. I will instead give you some hints that might help you.
Adding a class and styling this (as well as applying style directly to the Vue component AFAIK) implies adding these styles to the root Vue component. This is e.g. useful to set e.g. with: 100% or similar. I doubt this is sufficient in your case but you can check yourself.
In Vue (not only NC) the general idea is to let the component decide on its appearance. So, the NC button is responsible to style itself (possibly depending on props etc). So, if you want to make changes there, you could ask for an extension (and offer providing a PR for that) but discuss this with the designers before wasting too much time there implementing.
In any case, you can ask them, what would be the NC-like style to do stuff. There is a weekly meeting you can ask to get a review of your app and at any time you can write questions that typically are answered within short time. See here: Nextcloud
You might want to make clear what the difference of read-only and disabled is for you. I see no obvious difference, but maybe I just miss a major point.
One last, hacky resort: Vue allows (for very rare cases) a so-called deep styling. This depends on the Vue version you are using but allows to pass the component boundary. I highly advanced against it.
Chris
Hello, Chris…
Thank you for the hints. What ended up working for me is the :deep styling, goes something like this:
:deep(.input-field__input:disabled) {
color:var(--color-main-text);
background-color:rgb(245, 245, 245);
border: 1px solid var(--color-border-maxcontrast);
}
I know you advise against it, but I suppose I’ll be using it at least until I find a better solution and or I have a deeper understading about Vue and NC.
Maybe it’s a good idea to have custom styling slot available in NcInputs? Just saying…
Thank you again!
Yeah, I guessed so. My warning was especially as a temporary workaround is the most permanent solution, you will find (saying of an experienced dev I met) 
.
The problem is that you have to closely monitor the component when the underlying NC library is updated. As you use internals of this library by :deep(), it might break anytime without prior notice.
Not allowing arbitrary stylings ins part of the design process. Otherwise every app dev would add his/her individual and highly personal best styles rendering the complete NC ecosystem a somewhat wild mix. I know this can be sad at times.
I can only stress this: If there is really a need for stuff, the NC team typically will accept PRs. It might take time and you have to cooperate with them but it works (especially if it is not breaking).
So, do your workaround now and directly address the design team with your concerns. Clear out, what you need. Eventually, schedule a live session (or attend the NC conference in Berlin, if possible; there are plenty of opportunities). Then, get rid of the hacks and instead use a real solution!
Chris