Topic: Label/Field Colors for Disabled / Read Only
Hi! Is there a way to change the appearance of form fields based on whether they are enabled, disabled or readonly? I have four fields in a block with labels associated to them, some are disabled but visually it is not possible to tell which are editable and which are not.
Hi,
please create a snippet showing the problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best, Marta
Hi Marta and thank you, I have created a snippet here https://mdbootstrap.com/snippets/jquery/ukchris/337076
Basically what I was aiming to do was to use input fields to display data (read only or disabled) as well as for editable fields, when I do however visually they all look the same. I was asking if there's an easy way to visually indicate which are editable - automatically, maybe with the field label and the underline in a different color?
Marta Szymanska staff pro premium commented 6 years ago
Hi, your snippet is empty, could you create it once again? Best, Marta
Hi,Are there any solutions for this problem? It is nearly impossible to see which input text fields that are disabled.
Marta Szymanska staff pro premium commented 6 years ago
Hi, @ukchris's snippet was empty so I'm not sure where exactly is the problem. You also can create a snippet showing the problem here: https://mdbootstrap.com/snippets/ and I will try to help you with that. Best, Marta
peter.r.bladh@saabgroup.com commented 6 years ago
Here is a snippet... https://mdbootstrap.com/snippets/jquery/peter-r-bladhsaabgroup-com/430626
Hi,
you can add the styles like in my snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/432957 to show a particular input is disabled. We will think about adding these styles to the package.
Best, Marta
peter.r.bladh@saabgroup.com commented 6 years ago
Many thanks Marta:)
Is it possible to do the same with the mdb-select?
Marta Szymanska staff pro premium commented 6 years ago
Hi,
yes, it is possible with select, you just need to add a little bit of CSS. If you need, I can create a snippet with stylized select.
Best, Marta
peter.r.bladh@saabgroup.com commented 6 years ago
Thanks, that would be very nice :)
Marta Szymanska staff pro premium commented 6 years ago
Hi,
something like this is fine for you: https://mdbootstrap.com/snippets/jquery/marta-szymanska/440650?
Best, Marta
peter.r.bladh@saabgroup.com commented 6 years ago
Hi Marta,
We use the component mdb-select (MdbSelect) and the provided css does not seems to work for this component.
Best, Peter
Marta Szymanska staff pro premium commented 6 years ago
Hi, do you use MDB jQuery or Angular version? Best, Marta
Dear Peter,
Please note, that you have asked for help with MDB Angular component on MDB jQuery support. You shouldn't do that.
If you're having some issues with MDB Angular, please ask for help in the Angular section of our support forum.
About your problem - please add the below styles to the styles.scss file, and you'll be able to overwrite the default disabled select styles.
mdb-select > div.disabled > div.single {
border-bottom: 1px dotted #ced4da;
.toggle {
color: red !important;
}
}
Best Regards,
Damian
peter.r.bladh@saabgroup.com commented 6 years ago
With this style, it seems like the selected (current) value still look selectable.
peter.r.bladh@saabgroup.com commented 6 years ago
If I change .toggle to .value it seems to be correct.
Hi Damian and thanks for the styles.
I searched for this problem in the Support Forum and found this jQuery thread, but as it had exactly the same problem and no solution, I continued this thread. I apologize for that.
Best Regards,
Peter
Hi Peter,
No problem, but next time please check, if your problem domain is the same as ticket technology :)
Best Regards,
Damian
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.6.1
- Device: Windows
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No