Skip to:
Content

BuddyPress.org

Opened 5 years ago

Closed 5 years ago

Last modified 4 years ago

#6672 closed defect (bug) (fixed)

#item-header should not use `overflow: hidden`

Reported by: r-a-y Owned by: r-a-y
Milestone: 2.4 Priority: normal
Severity: minor Version: 1.7
Component: Templates Keywords: has-patch
Cc:

Description

Here's an example why we shouldn't use the CSS overflow: hidden declaration for the item-header DIV:
http://imgreview.com/i/gVLvz

The BP Group Email Subscription plugin adds a <div> in the group header that gets cut off because of the hidden declaration.

Attached patch fixes this by removing the overflow: hidden declaration and replaces this with a clear: both declaration via #item-header:after.

Attachments (1)

6672.01.patch (511 bytes) - added by r-a-y 5 years ago.

Download all attachments as: .zip

Change History (9)

@r-a-y
5 years ago

#1 @imath
5 years ago

Nice catch again! Looks good to me.

#2 @hnla
5 years ago

@r-a-y We should implement a bp-clearfix class really, then can just add the class where required on new elements or old.

Last edited 5 years ago by hnla (previous) (diff)

#3 @r-a-y
5 years ago

  • Milestone changed from Awaiting Review to 2.4

We should implement a bp-clearfix class really, then can just add the class where required on new elements or old.

For sure, but buddypress.css doesn't use SCSS ;) (Sounds like a good enhancement ticket!)

Feel free to go with this with the companion stylesheets though, hnla!

#4 @hnla
5 years ago

Doesn't matter about scss though, we just add a class (ruleset). The best place for that would be located in the main styles rather than the companion styles.

It's partly as I have a concern that clearing is getting a little complicated, I noted that the cover image styles are running some clearing on the item-button div that might be better handled.

Last edited 5 years ago by hnla (previous) (diff)

#5 @r-a-y
5 years ago

  • Owner set to r-a-y
  • Resolution set to fixed
  • Status changed from new to closed

In 10289:

bp-legacy: Do not use overflow: hidden for #item-header DIV.

Fixes a potential issue with truncated content. To be extra safe, we're
clearing the #item-header DIV after it is rendered with the :after CSS
property.

Fixes #6672.

#6 @r-a-y
5 years ago

Doesn't matter about scss though, we just add a class (ruleset).

Oh, I was thinking we'd use a sass mixin to avoid having to add the bp-clearfix class to the markup.

I noted that the cover image styles are running some clearing on the item-button div that might be better handled.

Where are you seeing this?

#7 @hnla
5 years ago

Where are you seeing this?

On the cover images header groups iirc, on the embedded styles for the cover images, did discuss with Imath briefly who leaves it in our capable hands :)

We have overflow handling clearing then pseudo element :before adding content whitespace, it either needs to be overflow to hadle containment or a full clearfix ruleset.

Oh, I was thinking we'd use a sass mixin to avoid having to add the bp-clearfix class to the markup.

Yep good point and probably would if we used scss for the main rules, however I tend not to like that approach as it starts to pad out the stylesheet, adding classes to markup tends to be lighter - as long as can add safely :)

#8 @DJPaul
4 years ago

  • Component changed from Appearance to Templates
Note: See TracTickets for help on using tickets.