While editing a record, the save and cancel buttons appear at the top left corner. The buttons are directly touching each other, which means an imprecise click can cause data loss. My users do this regularly (weekly, and sometimes daily). This has been a problem for years, at least with my users, but I'm not sure what to do about it.
Here is how the buttons look by default:
Using the developer console in Edge, I added padding between the buttons as a prototype:
The buttons are ugly, but the separation makes a huge difference for my users. I've found the number of misclicks has dropped from a few per week to one or two per month. It doesn't sound like much, but it really is significant.
How can I implement this change for the whole application? I know custom CSS can be added, but I can't figure out which elements to target. Here is what Google AI said to do, which did not work for me:
Here is how the buttons look by default:
Using the developer console in Edge, I added padding between the buttons as a prototype:
The buttons are ugly, but the separation makes a huge difference for my users. I've found the number of misclicks has dropped from a few per week to one or two per month. It doesn't sound like much, but it really is significant.
How can I implement this change for the whole application? I know custom CSS can be added, but I can't figure out which elements to target. Here is what Google AI said to do, which did not work for me:
Code:
# Steps to Fix EspoCRM Button Spacing
### 1. Open or Create the Custom CSS File
Navigate to your EspoCRM server installation and locate or create this file: `client/custom/css/custom.css`
### 2. Paste the CSS Code
Copy and paste the following snippet into the file to add 15px of space after the Cancel button:
/* Add spacing between EspoCRM action buttons */
.btn[data-name="cancel"],
.button-container button[data-name="cancel"],
.detail-action-container button[data-name="cancel"] {
margin-right: 15px !important;
}