I couldn't find any classes/IDs to use to make the list styles breaking the vertical tabs in #1 more specific. I tried to change the styles in #1 to only target 'Frontend Bartik' but not kick in on 'Admin theme' Bartik and there is nothing available.

I agree that adding an overriding selector and styles to fix this is easiest option here, seeing as Bartik itself is causing the issue.

The patch still applies cleanly, the code standards are fine and it fixes the issue. So I'm setting this to RTBC.

CommentFileSizeAuthor
#3 bartik_vertical_tabs_styles-2003766-3.patch431 bytesInternetDevels
#3 bartic-node-edit-vertical-tabs.png29.74 KBInternetDevels
#1 bartik_vertical_tabs_styles-2003766-1.patch470 bytesKeyboardCowboy
bartik-node-edit-styles.png248.86 KBKeyboardCowboy
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

KeyboardCowboy’s picture

KeyboardCowboy
Primary language English
Location Denver, CO, USA
CreditAttribution: KeyboardCowboy commented
FileSize
bartik_vertical_tabs_styles-2003766-1.patch470 bytes

The specific issue is that there are 2 CSS declarations in core/themes/bartik.css/style.css that are overriding core/misc/vertical-tabs.css

.region-content ul, .region-content ol {
    margin: 1em 0;
    padding: 0 0 0.25em 15px;
}
.block ol, .block ul {
    margin: 0;
    padding: 0 0 0.25em 1em;
}

are both overriding

.vertical-tabs-list {
    border-top: 1px solid #CCCCCC;
    float: left;
    list-style: none outside none;
    margin: -1px 0 -1px -15em;
    padding: 0;
    width: 15em;
}

Attached is a patch to redefine ul.vertical-tabs-list with the proper margin and padding, though I believe the best fix is to not override it in the first place. Since these are such wide sweeping declarations I'm hesitant to start altering them without some additional input.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Still present in alpha 7.

InternetDevels’s picture

InternetDevels CreditAttribution: InternetDevels commented
Issue summary: View changes
Status: Active » Needs review
FileSize
bartic-node-edit-vertical-tabs.png29.74 KB
bartik_vertical_tabs_styles-2003766-3.patch431 bytes

Hi, previous patch can't be applied. Attached another patch ;)

emma.maria’s picture

emma.maria
she/her
CreditAttribution: emma.maria commented
Issue summary: View changes
Status: Needs review » Reviewed & tested by the community

As CSS in Bartik is causing this issue because of the top open selectors stated in #1 the reset added in #3 seems to be the easiest solution that fixes the issue with only

alexpott’s picture

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

Committed d98e9cb and pushed to 8.x. Thanks!

  • Commit d98e9cb on 8.x by alexpott: 
    Issue #2003766 by InternetDevels, KeyboardCowboy: Fixed Vertical tabs...

Status: Fixed » Closed (fixed)

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