As derived from Texts are not vertically aligned in listing views and Dropbutton style update for Seven.

Problem/Motivation

Texts in Views list are not vertically centered within the table rows.

Views list text vertical alignment

Expected behavior

The texts should stay vertically centered within the table rows.

Proposed resolution

Change value for vertical-align of td,th from 'top' to 'middle'.

Remaining tasks

Create a patch, test, review

User interface changes

Views list will look better

API changes

None

CommentFileSizeAuthor
#10 Screen Shot 2014-11-09 at 15.26.49.jpg374.62 KBLewisNyman
#10 Screen Shot 2014-11-09 at 15.26.41.jpg511.14 KBLewisNyman
#9 texts_are_not-2293875-9.patch511 bytesG-raph
#4 content_after_fix.png37.85 KBngocketit
#4 views_after_fix.png71.78 KBngocketit
#1 views_ui-views-list-text-vertical-alignment-2293875-1.patch393 bytesngocketit
views_text_vertical_alignment.png58.34 KBngocketit
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ngocketit’s picture

ngocketit CreditAttribution: ngocketit commented
FileSize
views_ui-views-list-text-vertical-alignment-2293875-1.patch393 bytes

Patch attached.

ngocketit’s picture

ngocketit CreditAttribution: ngocketit commented
Status: Active » Needs review
dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented

It would be great to include a screenshot of after.

ngocketit’s picture

ngocketit CreditAttribution: ngocketit commented
FileSize
views_after_fix.png71.78 KB
content_after_fix.png37.85 KB

I attached some screenshots of the UI after applying the fix.

After fix
After fix

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented

Is it just me that this css selector is way to unspecific? Just curious about your thoughts here.

ericski’s picture

ericski CreditAttribution: ericski commented

I would tend to agree, I'd considering using .views-table

I also question if this /should/ be the expected behavior. Personally I prefer top valign in tables, though I'm quick to admit I'm not a designer/UX expert.

tjtj’s picture

tjtj CreditAttribution: tjtj commented

I agree with ericski. I prefer top alignment, and that is what is shown in the Views preview. But displaying the page makes it vertically centered. Why can't we choose the vertical alignment in addition to the horizontal alignment?

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented

I'm not sure why there is any views ui specific styling for table cells. Why are they different to every other table in core? Should we be aiming for consistency instead of the preference of every module?

G-raph’s picture

G-raph CreditAttribution: G-raph commented
FileSize
texts_are_not-2293875-9.patch511 bytes

I totally agree with Lewis. Since views is in core, we must be consistent and handle a global styling. There is no need for views to overwrite basic styling. If we want an addition for top alignment, then we should make a new issue from that.

I removed the overwriting styles. Patch in attach.

LewisNyman’s picture

LewisNyman
he/him
CreditAttribution: LewisNyman commented
Status: Needs review » Reviewed & tested by the community
FileSize
Screen Shot 2014-11-09 at 15.26.41.jpg511.14 KB
Screen Shot 2014-11-09 at 15.26.49.jpg374.62 KB

I can confirm that the latest patch fixes the problem and displays the Views UI listing the same as other listings, screenshots attached.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Fixed

This issue is a unfrozen change (css) as per https://www.drupal.org/core/beta-changes and it's benefits outweigh any disruption. Committed c93819c and pushed to 8.0.x. Thanks!

  • alexpott committed c93819c on 8.0.x 
    Issue #2293875 by G-raph, ngocketit: Fixed Texts are not vertically...

Status: Fixed » Closed (fixed)

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