Created on 20 August 2023, 10 months ago
Updated 23 September 2023, 9 months ago

Problem/Motivation

It looks like the HTML has been edited so tabs no longer appear Horizontal as some CSS is not being attached.

Steps to reproduce

Go to:
/admin/structure/types/manage/article/display

Tabs are verticle

Proposed resolution

I'm not certain this is consistent across all tab areas so I have added two style edits to catch the ones that don't seem to be attaching.

I have added a margin to the right of the tabs so that they don't overlap.

I have also duplicated all the CSS from:
tabs.css > tabs-full.css

But not sure if there's a better plan here, like a hamburger menu for mobile.

/**
* @file
* Theme styling for tabs.
*/

nav.tabs {
margin-bottom: 1rem;
}

ul.nav-tabs,
nav.tabs ul {
background: #e9ecef;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
li.nav-item {
flex-grow: 1;
}
nav.tabs ul .nav-item {
margin-right: 30px;
}
nav.tabs ul .nav-item a {
color: #303030;
text-align: center;
}
nav.tabs ul .nav-item.active a {
background: #303030;
color: #e9ecef;
}

πŸ’¬ Support request
Status

Closed: outdated

Version

5.5

Component

User interface

Created by

πŸ‡ΏπŸ‡¦South Africa alabandit

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024