Views 'Rearrange' dialog show the 'Remove' checkbox, which should be visually hidden

I have removed the checkbox and attached patch for same, please review

1. Create a Custom Module:
First, create a custom module in Drupal. You can name it something like "custom_views_hide_remove_checkbox."

2. Implement hook_form_alter():
Within your custom module, implement the hook_form_alter() function to alter the Views configuration forms. This hook allows you to modify form elements before they are rendered on the page.

In the custom module's .module file, add the following code:

/**
* Implements hook_form_alter().
*/
function custom_views_hide_remove_checkbox_form_alter(&$form, &$form_state, $form_id) {
// Check if the form is a Views field or sort configuration form.
if (strpos($form_id, 'views_ui_config_item_form') === 0) {
// Remove the "Remove" checkbox element from the form.
unset($form['remove']);
}
}

In Drupal, the 'Fields' or 'Sort' rearrange dialog you mentioned is likely part of the Views module, which allows you to create, manage, and display lists of content (nodes, users, etc.) on your site. The checkbox you want to remove is probably the "Remove" checkbox that appears next to each field or sort handler in the 'Fields' or 'Sort' configuration forms within the Views UI.

To achieve your goal of hiding the "Remove" checkbox in the 'Fields' or 'Sort' rearrange dialog, you can use a custom module to alter the Views form and remove the checkbox element. Here are the general steps to achieve this:

Create a Custom Module:
First, create a custom module in Drupal. You can name it something like "custom_views_hide_remove_checkbox."

Implement hook_form_alter():
Within your custom module, implement the hook_form_alter() function to alter the Views configuration forms. This hook allows you to modify form elements before they are rendered on the page.

In the custom module's .module file, add the following code:

php
Copy code
/**
* Implements hook_form_alter().
*/
function custom_views_hide_remove_checkbox_form_alter(&$form, &$form_state, $form_id) {
// Check if the form is a Views field or sort configuration form.
if (strpos($form_id, 'views_ui_config_item_form') === 0) {
// Remove the "Remove" checkbox element from the form.
unset($form['remove']);
}
}

3. Enable the Custom Module:
After creating the custom module, place it in your Drupal installation's modules/custom/ directory. Then, go to the Drupal administration panel, navigate to "Extend," and enable the "custom_views_hide_remove_checkbox" module.

4. Clear Cache:
Once the module is enabled, clear Drupal's cache to ensure that the changes take effect.

The last submitted patch, 2: 3375806-2.patch, failed testing. View results →

I will check this.

Thanks

I have checked this, it is proper that it is being rendered from rearrange.php.

If we remove this line of code
'#type' => 'checkbox'

from Line number 124 in $form['fields'][$id]['removed'], the issue seems to be fixed.

I am attaching scrrenshots of before and after the patch.

Before patch:

After patch:

The patch provided in #2 is working fine. However, I too tried creating a patch but there is no difference between the created patch and existing patch, so it won't be ideal to upload the patch. I will leave this issue for review by the community.

Please review.

Thanks

Please ignore the patch "3375806-6.patch" added in #6. It is similar to #2.

We don't want to completely remove the checkbox from the form, since that is what remove the handler on submission. We need to visually hide it in Claro, like it already is in Stark.

Updated the title and IS to hopefully make this more clear

Hi @Lendude,

I re-checked the issue, for making the checkbox visually hidden, we already have these lines of css

/* Hide 'remove' checkboxes. */

.views-remove-checkbox {
  display: none;
}

in views_ui.admin.theme.css in claro/css/theme.

But, there is also a conflicting css in drupal,

.form-boolean {
    <strong>display: inline-block;</strong>
    box-sizing: border-box;
....

Because of this display: inline-block, the css of display:none, is not working. As soon as I uncheck the display: inline-block in inspector, it takes the display: none, and the checkbox gets visually hidden.

The css is conflicting because, the input tag of checkbox contains both the classes of .form-boolean and .views-remove-checkbox.

So, I have modified the existing code of css as

/* Hide 'remove' checkboxes. */

.form-boolean.views-remove-checkbox {
  display: none;
}

Since, this is my first time working on these kind of issues, if any mistake is there, please guide me.

Thanks

reviewing this.

Hi everyone, thanks for the patches and proposed solutions! Great to see so many people working on this.

I've reviewed and discussed this with @lendude and @finne and we've found a few issues with #6 and #9. I think a better way to solve this is to simply add a js-hide class to the input element by the views ui module. This way it works in all themes and the checkboxes are only hidden when JavaScript is enabled.

Please review the patch attached. Thanks again!

@tinto, it was new for me. I will remember this approach. Thanks 😃

Hi,

Tested both patches, 3375806-9.patch and 3375806-11.patch, and they are both working well. However, I found that adding the class js-hide to the input element using the Views UI module is a better approach. This change works perfectly on all other themes when switched. I specifically tested the 3375806-11.patch on two admin themes, Claro and Gin, and it worked perfectly on both of them. attached the images for reference .

Testing steps:
1. Install the Drupal setup 11 and enabled the claro theme.
2. on path 'admin/structure/views/view/demo_testing' , applied the patch and verified the changes.

After patch 11:
Claro theme:

Gin Theme:

Looks good for RTBC+

Thanks for the review!

It's important to take into account when reviewing is that when you disable JavaScript in your browser, the checkboxes should be visible. When JS is enabled, they should be (visually) hidden.

Added a test for making sure the field removal checkbox still works, since there was only a non-javascript test for this, now added a JS test to make sure the correct checkboxes and links are shown and the checkbox gets set when using the remove link

The test only file uses Claro, where the patch with the fix uses stark. I think, going forward it's better to test this in stark since that is more in line with our other tests in views. So test-only file is sort of the interdiff

Applying the patch posted here seems to create another issue: the "Remove" links no longer properly align with the table column header.

This is because the patch hides the input element, but not the wrapper div.

I think this can only be fixed in the (admin) theme, so I will open a separate follow-up issue that addresses this.

The last submitted patch, 15: 3375806-15-TEST_ONLY.patch, failed testing. View results →

Review: patch looks good.
This makes the behaviour identical to other views dialogs such as sort. The misalignment can be addressed in the followup.

Committed 597cf49 and pushed to 11.x. Thanks! Also cherry-picked to 10.1.x as a non-disruptive bug fix.

/**
* Implements hook_form_alter().
*/
function custom_views_hide_remove_checkbox_form_alter(&$form, &$form_state, $form_id) {
// Check if the form is a Views field or sort configuration form.
if (strpos($form_id, 'views_ui_config_item_form') === 0) {
// Remove the "Remove" checkbox element from the form.
unset($form['remove']);
}
}

Automatically closed - issue fixed for 2 weeks with no activity.