Misalligned Type field in Drupal 8.x views

This happened in: #1832872: Fix broken Views UI search box/filtering Referencing that issue because it gives some context to this issue.

This patch will put it back closer to how it was. But, better would be to make it responsive so that the form items can all fit on one line, and then stack when there isn't enough space. Ideally, the labels will stay on the same line as the associated form item.

Here's a patch for styling.

Changes to make the fields online. Responsive and pixel perfect needs work.

I have changed RTL as well.

Now it looks pretty bad-ass. Thanks @lilGemVinny

This is how it looks like for me, and my screen width is 1280px.

I agree this is still an improvement than before, but we might want to do better.

+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -195,6 +195,11 @@ input.form-radio {
 .container-inline .details-wrapper > * + * {
   padding-left: 4px; /* LTR */
 }
+
+.container-inline > .form-item-override-controls-group {
+  padding-left: 0px;
+}
+
 [dir="rtl"] .container-inline > * + *,
 [dir="rtl"] .container-inline .details-wrapper > * + * {
   padding-left: 0;

That's not a good place to add that. It's between a rule and its RTL version. Move it to after that. Also, the rule you added needs an RTL version too.

Edit: There is also some extra whitespace over the fields, that we can get rid of, i.e. :

#views-filterable-options-controls .form-item {
  margin-top: 0;
}

Good point @hermon

I have made your suggested changes.

Does it look any better for you? I have attached a screenshot of what it looks like for me.

Here's the patch...

Interdiff !!!

Thanks. That fixes it for the 1280px screen width.
There was a small RTL issue, and a missing space, that I fixed.
Here's an RTL screenshot:

oops! wrong patch.

Patch in #18 still applies and resolves the issue in Chrome. This could use verification in a few other browsers I think.

I've added a beta phase evaluation to the issue summary.

The problem with this patch is it makes some major changes to system.module.css which means it could cause regressions everywhere. Can we restrict the changes to just the views ui css?

Well, I was surprised to find out that the views-ui CSS doesn't get loaded on the /nojs pages. Is that intentional? See: /admin/structure/views/nojs/add-handler/comments_recent/block_1/field

Search for .css, and most CSS that is in the overlay version, is not on the /nojs page.

Since, the prior patch was only making select box labels into blocks and not the Search field, I assumed that we didn't mean to do change the nojs page and so I further scoped the CSS within ".views-ui-dialog". Although, now that the CSS is in the views-ui it wouldn't affect the /nojs page anyway since the CSS doesn't get loaded anyway.

I did a manual test for the filters in the 'Add fields' dialog.

1. The field labeling is inconsistent between fields. For select elements the label is displayed above elements, for textfields the label is displayed inline. Let's place all form element labels consistently.
2. We abstracted a class .form--inline for this pattern to be applied in #2333719: Abstract Views Exposed Form styling out into a reusable class. Instead of adding more CSS, let's clean up the markup and existing CSS so this pattern can be applied. For an example implementation, have a look at the filter options on /admin/content

@idebr. After applying the patch from https://www.drupal.org/node/2429457
Its look like..

Trying to take the direction suggested by idebr in #22.

@lokapujya: Tested the patch (https://www.drupal.org/files/issues/2296261-24.patch) on local, the alignment of fields look good. However spacing between the fields is inconsistent. Attaching a shot.

What browser were you using? It looks good on Mac Chrome and Firefox.

I am also using Mac(10.9.5) Chrome and Firefox. The attached shot is of chrome (Version 40.0.2214.115).

Tested patch locally and attaching some screenshots.

@Sabreena @lokapujya : Fields looks good in Chrome-40.0 (windows 8). But space is inconsistent in Arabic. Please check screenshots for Arabic as well.

One possibility is to move the search box to be the last element so that the two dropdowns are next to each other. Then the spacing might not be as much of a concern. If someone else wants to fix the spacing, go ahead; I was only interested in fixing the alignment.

Just fixed coding standards for arrays.

Here's a patch that fixes the spacing, but I never had all fields in one line for RTL either before or after applying previous patches. Using Mac with Chrome. LTR looks fine, but RTL breaks onto two lines for me. Can someone please test this for RTL and verify whether or not fields are breaking onto two lines?

--SEE #34 for patch and interdiff

After patch in #34, this is what I find for LTR vs RTL. RTL was behaving the same before patching.

Previous patch was empty. This is replacement for #32.

@lduerig I think fields are still aligned, Please check screenshot captured after applying #34 patch.

Looks good to me!

Provided screenshots

Fields LTR

Fields RTL

CSS is not frozen in beta. Committed 2004f74 and pushed to 8.0.x. Thanks!

This issue inserted bug.

https://www.drupal.org/node/2472751