Would be nice if there was some visual indication that inline editing is enabled on a details component. Maybe something on hover? There’s no way of knowing whether or not you can inline edit a field in a details component at this moment.
1 Like
So strange, I could have sworn we always had this hover effect.
Will certainly add this.
It’s there on tables, haven’t looked at many other components. Just noticed it on details.
I tend to highlight it by using a FontAwesome image of a pencil or pen against the column values.
Agree though would be useful to have something designed to support understanding of edit.
Any idea on when this will be fixed? Clients dont know they can click the field on the details page to edit. Thanks.
This is still on our immediate roadmap, but if you want an immediate solution you can just do the following:
Add this CSS into your layout or page (depending on the scope you want this to apply to).
.custom-inline-css .af-detail .form-group > div:hover {
background-color: #c7eefe!important;
position: relative;
cursor: pointer;
}
Then in each details component where you have Inline Editing enabled, add this CSS class.
1 Like
Anyway to target just the field? The highlight will span the entire label and field unless the pointer is placed exactly over the field. Can the pointer be changed to the pencil icon same in the table inline edit highlight. Thanks!
Can’t answer the first part of your question right now but look at this page about cursors.
Maybe this?
Changed the cursor and added an edit emoji
.custom-inline-css .af-detail .form-group > div:hover {
background-color: #c7eefe!important;
position: relative;
cursor: text;
}
.custom-inline-css .af-detail .form-group >div:hover:before {
content: "✍";
}Just occurred to me that you’re looking for this like in the other components:
.custom-inline-css .af-detail .form-group > div:hover {
background-color: #c7eefe!important;
position: relative;
cursor: text;
}
.custom-inline-css .af-detail .form-group >div:hover:before {
content: "\f040";
font-family: "Font Awesome 5 Pro";
position: absolute;
right: -24px;
top: -1px;
padding: 4px;
color: red;
}Hey Moe, The highlight with icon works however it will still span the entire row sometimes which disables the edit function and then the user has to click several times to get it just on the field - anyway to fix this so it only highlights the field. Would be great if this option was “baked” in like on tables 
DOES NOT WORK:
WORKS: Can take several clicks to highlight just the data field
