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

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

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.

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.

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.

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.