This happens in Module Builder, on the set of tabs for a module entity, with the screen wide enough to show tabs rather than the compact tab menu, but narrow enough to cause wrapping of tabs with multiple words.
The 3 highlight types should reach the bottom of the grey area.
1. Install Module builder
2. Go to admin/config/development/module_builder
3. Create a module and save it
4. Adjust the window width
The tab's should be bottom aligned and equal in height for normal and hover states.
Review the MR
Before:
After:
NA
NA
NA
| Comment | File | Size | Author |
|---|---|---|---|
| #31 | Tabs-focus-otline.png | 80.13 KB | ahsannazir |
| #31 | Tabs-after.png | 101.43 KB | ahsannazir |
| #22 | Tab-links-UI.png | 40.8 KB | mithun s |
| #17 | tabsAfter-hover-2.png | 71.85 KB | shashwat-tiwari |
| #17 | tabsAfter-hover-1.png | 66.4 KB | shashwat-tiwari |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !7997changes, plain diff MR !5872
Comments
Comment #2
bhumikavarshney commentedWorking on this issue as a part of Claro Contribution Day.
Comment #3
saschaeggiThis is a small bug which needs some love from a (frontend) developer ☺️
This might be easily fixible with using
Comment #4
bhumikavarshney commentedHi saschaeggi,
I tried to reproduce this issue with Drupal 11.x version but as per the steps mentioned to
Install Module builder
But this module is not compatible with this version adding screenshot for the same.
Can we check this with d10 version or anything am missing on my end.
Thank you!
Comment #5
saschaeggi@BhumikaVarshney you can easily mock this situation by just duplicating a few tabs in the inspect mode
Comment #8
meeni_dhobale commentedI added the MR by changing the nav bottom padding and alignment centre. Those two property solves the issues. Adding a screenshot for reference.
Comment #9
smustgrave commentedCan steps that don't require a contrib module be added?
But as a UI change will need before/after screenshots added to the issue summary (preferably with core), also the proposed solution added.
Comment #10
shweta__sharma commentedThe issue is mentioned above not replicable on my end. Highlighting tabs looks completely different see my screenshots -
Tabs with core-
Tabs with contrib module (module builder)
Comment #11
meeni_dhobale commentedHere are some steps to reproduce:
* Login as admin
* Go to any content type/contact form or anything where we can see the tabs menu. eg. /admin/structure/types/manage/article/fields
* Try to replicate those tab menus by inspecting the page, So we can see the multiple tabs that can get the whole display width or adjust the screen size accordingly.
* Now check the tabs by enabling focus on it.
Here are the before and after images:
Before:
After:
Comment #12
kanchan bhogade commentedComment #13
kanchan bhogade commentedHi, I have verified this issue in Drupal 11 with the Claro theme. The issue related to the Tab highlights for current/hover/click is too high up when other tabs have 2 lines of text of the claro has been fixed.
Testing steps followed :
1. Install Drupal 11
2. Make the Claro theme
3. Go to the Content and check for tabs with 2 lines of text
4. Apply the patch
5. check for tabs will able to see Centraline text
Attaching the screenshots. Moving to RTBC
Comment #14
rifas-ali-pbi commented@kanchan-bhogade better do not assign task to yourself and status will be changed to RTBC by reporter or maintainer after verifying the screenshot.
Thanks
Comment #15
nod_has anyone tried the suggestion in #3? Having the items centered is not better than the current situation. I would expect the tabs to be aligned at the bottom so that the highlighted border is always against the white part of the page.
With the current patch the border floats in the middle for short menu items like "edit".
Comment #17
shashwat-tiwari commentedI have amended the MR by changing the alignment to end and making the list and anchors 100% in height to make all elements equal in height and align at the same level.
Please refer to the attached screenshots of after and before for normal and hover states.
Comment #18
smustgrave commentedIssue summary is incomplete, missing proposed solution and before/after screenshots in user interface changes.
Comment #19
shashwat-tiwari commentedI have updated the issue summary with proposed resolution and before/after screenshots.
Comment #20
smustgrave commentedFeedback on the MR
Comment #22
mithun sChanging the
.tabsto.tabs__linkwill make the UI look like this ( screenshot: Tab-links-UI ) . Also the UI beaks on click of the tabs. This issue Needs more work.Comment #24
anicotoComment #25
xjmBased on the numerous different approaches that have been tried, I think this isn't really in a novice task state ATM. Thanks!
Comment #26
smustgrave commentedSeems #22 mentions the current solution is breaking so moving to NW for that.
Comment #29
gauravvvv commentedI have addressed #22, using a different approach for mobile and desktop. please review. thanks
Comment #30
nod_Haven't tested it yet but I like this much better, thanks
Comment #31
ahsannazir commentedThe MR in #29 looks good. All tablinks are bottom aligned now. Attaching screenshots for ref.
I also see the border-bottom of focus outline is not visible. Do we need to keep it as it is or it also needs a fix?
Comment #32
smustgrave commentedNeeds a rebase for the failures I believe. But if new solution can it please be documented in the issue summary.
Comment #33
ahsannazir commentedComment #34
smustgrave commentedShould be good
Comment #35
nod_saving credits, MR needs work, comments incoming
Comment #41
nod_I really wished the feedback in #3 had been followed early on, it would have saved 6 month of delay.
Fixed the duplicate selector on commit.
Committed and pushed 20a080c2e9 to 11.x and 4f8a463739 to 11.0.x and 42ffad694f to 10.4.x and f761bb6ab6 to 10.3.x.
Comment #43
xjmAmending attribution.