Problem/Motivation

When JavaScript is disabled, a giant gap to the left of the vertical tabs appears. There are a few styles in vertical-tabs.css that need to be scoped to a .js context.

Proposed resolution

Scope properties such as margin, border and padding to a .js context.

Before the CSS fix

A screenshot of the vertical tabs on an edit form. JavaScript is disabled. There is a gap to the left of the vertical tabs.

After the CSS fix.

A screenshot of the vertical tabs on an edit form. JavaScript is disabled. There is no gap to the left of the vertical tabs. The inspector is open and the correct CSS is shown.

This might be the CSS fix.

.vertical-tabs-panes {
  background-color: #fcfcfa;
}

html.js .vertical-tabs-panes {
  margin: 0 0 0 240px;
  padding: 10px 15px 10px 15px;
  border-left: 1px solid #a6a5a1;
}
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ekl1773’s picture

Status: Active » Needs review
FileSize
1.5 KB

Followed recommendation in the issue description: the margin, padding and border are only applied when JavaScript is enabled. Also added rtl styling accordingly.

jessebeach’s picture

Added a newline to the end of the vertical-tabs-rtl.css

rteijeiro’s picture

Status: Needs review » Reviewed & tested by the community

Patch applies well and code seems right.

Tested disabling Javascript and box expands correctly.

Maybe RTBC?

jessebeach’s picture

If the bot comes back green (and there's no reason it shouldn't), then RTBC from me as well.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, Vertical-tabs-gap-2018913-2.patch, failed testing.

jessebeach’s picture

Drupal\views_ui\Tests\OverrideDisplaysTest

This has nothing to do with Views UI. TestBot hiccup. Respooling.

jessebeach’s picture

Status: Needs work » Needs review

#2: Vertical-tabs-gap-2018913-2.patch queued for re-testing.

Zarabadoo’s picture

Status: Needs review » Reviewed & tested by the community

This looks good to me, and it seems there there is. Marking as RTBC.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 614550d and pushed to 8.x. Thanks!

echoz’s picture

@jessebeach, why would we qualify class .js with the html element selector?

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