Switch site to Stark.

Compare buttons at admin/structure/menu with those at admin/structure/views:

- the ones at views have much smaller text
- the ones at views actually dropdown. the ones elsewhere expand and affect content around them

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

tim.plunkett’s picture

Component: theme system » Stark theme
Priority: Major » Normal

Similar to #2278415: Bartik dropbutton styling looks bad, which is not major.

joachim’s picture

I think this is fairly important, as it means that right now, every D8 theme has to do fixing work on dropdowns to make them work properly.

joachim’s picture

There is styling for dropdown menus in views_ui.admin.css, which IMO shouldn't be there at all -- these should be styled consistently across all of Drupal.

If you remove the styles from views_ui.admin.css, then dropdown menus are broken across the board.

tim.plunkett’s picture

Despite my best efforts to prevent it over the course of two issues to prevent it
#1989470-132: Dropbutton style update for Seven
#1899236-50: Add new Splitbutton render element to eventually replace Dropbutton

It still went in and broke Stark and Bartik.

I reopened the original issue for revert, to no avail.

So yeah, I think its important, but it's not a major bug.

And the views stuff is still there because it was Views who brought this into core, and I defended that styling tooth and nail.

joachim’s picture

Actually I was mistaken about them being ok in Views admin -- it's just that in the list of Views, the table rows are tall enough that they can encompass the whole of the expanded dropdown menu!

So the situation is that dropdown menus are broken in Stark (ie, in all themes that don't implement the fix themselves). Seven has styling in core/themes/seven/css/components/dropbutton.component.css which makes them work in Seven. They are broken in Stark and Bartik.

joachim’s picture

Status: Active » Needs work
FileSize
985 bytes

Fairly simple fix to the problem of them not dropping down.

However, this moves the whole button in Bartik for reasons I can't figure out.

joachim’s picture

Ah now in Views UI with Stark they work. The difference is that Views UI sets 'vertical-align:top' on its TD.

But if I add that, then the cells at admin/structure/menu are too short to contain the collapsed menu.

So it looks like as things stand, putting dropdown menus in an admin table requires you to add extra styling to properly contain them. I really do think this is a major.

LewisNyman’s picture

There is styling for dropdown menus in views_ui.admin.css, which IMO shouldn't be there at all -- these should be styled consistently across all of Drupal.

There is an inconsistency in implementation, we had to do a few special fixes for the views interface. We have a few sub-issues that I hope will address this in #1899236: Add new Splitbutton render element to eventually replace Dropbutton Do you think just moving some of the styling from Seven into system is enough of a quick fix?

LewisNyman’s picture

Specially I meant #2278479: Change the dropbutton theme function to ensure consistent output and accommodate the splitbutton design, which would implement the original design from the Seven style guide. The dropbutton element no longer needs to expand with the text inside of it when clicked, which solves a lot of issues.

joachim’s picture

I think this needs to be in core rather than any theme, because otherwise anyone making a D8 theme will have to muck around making dropdown menus not be broken -- I encountered this myself on http://drupal.org/project/garland.

Can we move the styling from Seven into core, minus the colour and the rounded corners?

LewisNyman’s picture

Issue tags: +CSS, +frontend

How much CSS do we need to move over? I thought it was just the absolute positioning?

Bojhan’s picture

We should do the bare minimal here. Stark is meant to look ugly, lets not introduce loads of styling - only functional.

joachim’s picture

Definitely. They should:

- 1. drop down, rather than cause elements around them to reflow
- 2. when collapsed, be positioned where a normal element would be and not overflow

Unfortunately, my patch fixes 1 but breaks 2 :(

LewisNyman’s picture

Assigned: Unassigned » LewisNyman

I'll take a look, I remember having to jump through a few hoops to get it working correctly in Seven, so I just need to find the correct CSS to shift over.

LewisNyman’s picture

Status: Needs work » Needs review
FileSize
25.27 KB

So the trick is to set the dropbutton-widget to position absolute but set the dropbutton-wrapper to min-height: 2em so they don't overlap.

Screenshot of them expanding correctly in stark:

I was tempting to move the views UI font size changes into the Seven theme but the font size was there before so no need to complicate this patch. A much better fix is dropbutton--small #2160481: Componentize the dropbutton CSS

It's also a lot easier to tidy up these little bugs here and there then continuously rerolling a massive patch.

joachim’s picture

The screenshot looks perfect! (Ugly as sin of course, but it's meant to be in Stark! :)

You may have forgotten to upload the patch though ;)

LewisNyman’s picture

Assigned: LewisNyman » Unassigned
FileSize
1.78 KB

Facepalm

joachim’s picture

Status: Needs review » Reviewed & tested by the community

Patch fixes the problem in Stark. Also works fine in Bartik and Seven.

Tested contrib Garland too, where they need a bit of styling for size, but the basic operation is good.

webchick’s picture

Status: Reviewed & tested by the community » Fixed

Great, thanks a lot for the fix here.

Committed and pushed to 8.x. Thanks!

  • webchick committed c3a5a2e on 8.x
    Issue #2282599 by LewisNyman, joachim: Fixed Dropdown menus in most of...

Status: Fixed » Closed (fixed)

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