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

Only local images are allowed.

After the CSS fix.

Only local images are allowed.

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;
}

Comments

Status:Active» Needs review
StatusFileSize
new1.5 KB
PASSED: [[SimpleTest]]: [MySQL] 57,715 pass(es).
[ View ]

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

StatusFileSize
new1.58 KB
PASSED: [[SimpleTest]]: [MySQL] 57,679 pass(es).
[ View ]

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

Status:Needs review» Reviewed & tested by the community

Patch applies well and code seems right.

Tested disabling Javascript and box expands correctly.

Maybe RTBC?

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.

Drupal\views_ui\Tests\OverrideDisplaysTest

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

Status:Needs work» Needs review

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

Status:Needs review» Reviewed & tested by the community

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

Status:Reviewed & tested by the community» Fixed

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

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

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