A material design for read only fields

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
davidbalansa
Posts: 47
Joined: Mon Feb 01, 2016 10:08 am
Location: Australia

A material design for read only fields

Post by davidbalansa » Wed Nov 14, 2018 2:38 pm

Hi all,

I am trying to determine the best way to display read only fields following material design concepts. I have come up with 2 designs and am not really happy with both.

1. Make the field enabled false. It differentiates the field from an input capable field as it does not get focus or change style. The downside is the user can't copy the value to the clipboard and use elsewhere.
Capture.PNG
Capture.PNG (22.08 KiB) Viewed 2069 times
2. Make the field read only true.The positive is that the user can copy the value. The negative is it can confuse the user as it responds to focus and changes its style like an input capable field.
Capture2.PNG
Capture2.PNG (9.35 KiB) Viewed 2069 times
My questions are:
1.What would be considered the material design the standard for a read only field?
2.What have others decided on for displaying read only fields?
3. Is it possible to set the field to read only and not have it change style when it receives focus (remains grey)? This is similar to the example I found
https://material.angularjs.org/1.1.0/demo/input

Thanks in advance!

jyoung
Posts: 652
Joined: Thu Jan 21, 2016 6:43 am
Location: Oklahoma City, OK USA

Re: A material design for read only fields

Post by jyoung » Thu Nov 15, 2018 1:55 am

I had the same issue, I settled on two things.
  1. Mark the Field as "ReadOnly"
  2. Set the Appearance to "None"
In this case I also hid the Helper Text by setting the HelperPosition to "None"
Capture.PNG
Capture.PNG (7.86 KiB) Viewed 2050 times
I don't know what the "offical" MD guidelines are, but for me, removing the under line removed the "indication" that it was editable, hence the Appearance "None".

Joe

davidbalansa
Posts: 47
Joined: Mon Feb 01, 2016 10:08 am
Location: Australia

Re: A material design for read only fields

Post by davidbalansa » Thu Nov 15, 2018 8:12 am

Hi Joe,

Thank you for the response, it was extremely helpful. I think your implementation works very well.

David

Post Reply