Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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
After the CSS fix.
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
Comment #1
ekl1773Followed recommendation in the issue description: the margin, padding and border are only applied when JavaScript is enabled. Also added rtl styling accordingly.
Comment #2
jessebeach CreditAttribution: jessebeach commentedAdded a newline to the end of the vertical-tabs-rtl.css
Comment #3
rteijeiro CreditAttribution: rteijeiro commentedPatch applies well and code seems right.
Tested disabling Javascript and box expands correctly.
Maybe RTBC?
Comment #4
jessebeach CreditAttribution: jessebeach commentedIf the bot comes back green (and there's no reason it shouldn't), then RTBC from me as well.
Comment #6
jessebeach CreditAttribution: jessebeach commentedDrupal\views_ui\Tests\OverrideDisplaysTest
This has nothing to do with Views UI. TestBot hiccup. Respooling.
Comment #7
jessebeach CreditAttribution: jessebeach commented#2: Vertical-tabs-gap-2018913-2.patch queued for re-testing.
Comment #8
Zarabadoo CreditAttribution: Zarabadoo commentedThis looks good to me, and it seems there there is. Marking as RTBC.
Comment #9
alexpottCommitted 614550d and pushed to 8.x. Thanks!
Comment #10
echoz CreditAttribution: echoz commented@jessebeach, why would we qualify class .js with the html element selector?