Customize/increase the checkbox size

👨‍💻 Development Help
1

Hello,

The checkbox fields in the suitecrm look small on the detail view and edit view of the module. Is there any way to increase size of those checkboxes? :thinking:

Thanks in advance!

2

Add some custom CSS to increase the size of the checkboxes.

  1. Create a custom CSS file in the custom/include/javascript directory - and create directory if it doesn’t exist. Name the file something like custom.css.

  2. Include the custom CSS file in the custom JS file. Add the following lines to the custom/include/javascript/custom.js file (create if it doesn’t exist):

    link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'custom/include/javascript/custom.css';
    document.getElementsByTagName('head')[0].appendChild(link);

Potential CSS Solutions:

Note: This CSS assumes basic HTML structure and might need adjustment based on your SuiteCRM theme.

/* Increase checkbox size on detailview and editview */
.detailView input[type="checkbox"],
.editView input[type="checkbox"] {
  width: 24px; /* Adjust width as needed */
  height: 24px; /* Adjust height as needed */
}

Explanation of the Code

  1. .detailView input[type="checkbox"]: Targets all checkbox inputs within elements having the class detailView.
  2. .editView input[type="checkbox"]: Targets all checkbox inputs within elements having the class editView.
  3. width: 24px; height: 24px;: Sets the desired width and height for the checkboxes. You can adjust these values to fit your requirements.

Implementing the Custom CSS

  1. Find the CSS file responsible for styling checkboxes in your SuiteCRM theme. This should be located in the themes directory.
  2. Insert your CSS code into the appropriate section of the CSS file.
  3. Test and Adjust: Save the CSS file and clear your browser cache. Test the changes on detailview and editview pages. Adjust the width and height values as needed.
  4. If the above CSS doesn’t work, you might need to increase the specificity of your selector by adding more specific classes or IDs.
  5. If your SuiteCRM theme uses custom CSS classes for checkboxes, you’ll need to target those classes instead.
  6. You might want to adjust other checkbox properties like border, margin, padding, and background to achieve the desired appearance.

More specific CSS example:

.detailView .checkbox input[type="checkbox"],
.editView .checkbox input[type="checkbox"] {
  /* Your styles here */
}

Remember to back up your files before making modifications.

1 Like
3

Simpler way to increase checkbox size: :white_check_mark:

/* css to increase size of checkbox */

input[type=checkbox]
{
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  transform: scale(1.5);
  padding: 5px;
}