Skip to:
Content

BuddyPress.org

Opened 6 years ago

Closed 4 years ago

Last modified 4 years ago

#6510 closed defect (bug) (wontfix)

Overlapping Message title + datestamp with left sidebar + widgets

Reported by: vhmarkgmailcom Owned by:
Milestone: Priority: low
Severity: normal Version: 2.3.0
Component: Templates Keywords: 2nd-opinion
Cc:

Description

In the twentyfourteen theme with a left sidebar + a couple of right-side widgets, the messages title overlaps with the datestamp.

To reproduce:

  • Set your theme to twentyfourteen
  • Create a couple of text widgets with ul lists in the left (primary) sidebar
  • Create a couple of longish text widgets with ul lists in the right (content) sidebar of the page
  • Send a message from one user to another, and view the Inbox, url=/community/members/someusername/messages/

Attachments (2)

BuddyPress-messages-inbox-overlapping-text.png (150.8 KB) - added by vhmarkgmailcom 6 years ago.
BuddyPress-messages-inbox-overlapping-text-2.png (31.3 KB) - added by vhmarkgmailcom 6 years ago.

Download all attachments as: .zip

Change History (13)

#1 @hnla
6 years ago

Thanks for reporting this @vhmarkgmailcom

To be honest the aim of the exercise originally was to try and maximize what was a very narrow content width for BP component screens that require as much viewport space as possible and to that end the right sidebar wasn't really something figured into things as it seeks to take so much width for it's self.

We could probably add some fine tweaks for the message layout, but the best thing might be for you to copy over the stylesheet for twentyfourteen from BP core templates and adjust things, you could try adding:

#buddypress table#message-threads tr td.thread-from {
 height: 4.2em;
}


#2 @hnla
6 years ago

  • Component changed from Component - Messaging to Appearance
  • Milestone changed from Awaiting Review to 2.4

#3 @vhmarkgmailcom
6 years ago

Yeah - I'm not a huge fan of our layout but it's out of my control ATM.

I was playing with forcing that datestamp onto its own line but the left-hand checkbox ends up causing missing background color beneath it.

#buddypress table#message-threads tr span.activity {float:none; font-size:smaller}
#buddypress table#message-threads tr td.bulk-select-check, 
    #buddypress table#message-threads tr td.thread-from {height:auto}
#buddypress table#message-threads tr td.bulk-select-check {border-bottom:none}
#buddypress table#message-threads tr td.thread-from {display:table-cell}

I'll use your suggested height adjustment instead.

Thanks!

#4 @vhmarkgmailcom
6 years ago

The fixed height is still going to be a problem (i.e. it'll overlap with the date) when there's multiple users or long names listed in the To: or From: areas.

#5 @hnla
6 years ago

it will be a consequence of this attempt to re-lay out the table in this fashion, it may be better to try and revert the table to work as a standard series of tr/td elements. However trying to get this much info into a table while trying to restrict the table width so much is never going to work well.

Are you tied to this sidebar or prepared to lose it for user accounts screens? If you can lose it then you could copy page.php to /buddypress/page.php and add a conditional to check for user account screens around the sidebar call:

<?php if( !bp_is_user() ) : ?>
  <?php get_sidebar( 'content' ); ?>
<?php endif; ?>

#6 @r-a-y
6 years ago

  • Keywords 2nd-opinion added
  • Version changed from 2.3.1 to 2.3.0

vhmarkgmailcom - I would probably recommend falling back to the old styles since that doesn't use a vertical nav and would give you more real estate to work with.

You can fallback to using the old styles by copying this snippet into your theme's functions.php:
https://codex.buddypress.org/themes/buddypress-companion-stylesheets/#existing-styled-themes

Change:
wp_dequeue_style('bp-twentyfifteen');

to:
wp_dequeue_style('bp-twentyfourteen');

Last edited 6 years ago by r-a-y (previous) (diff)

#7 @vhmarkgmailcom
6 years ago

We are indeed stuck with the sidebar on all these pages ATM.

After a bit of playing, I'm happy with my original styling fix. Tested in Win7 IE, Chrome, and Firefox at various widths. The last line is new since my last post of this CSS and fixes the whitespace problem.

#buddypress table#message-threads tr span.activity {float:none; font-size:smaller}
#buddypress table#message-threads tr td.bulk-select-check, 
    #buddypress table#message-threads tr td.thread-from {height:auto}
#buddypress table#message-threads tr td.bulk-select-check {border-bottom:none}
#buddypress table#message-threads tr td.thread-from {display:table-cell}
#buddypress table#message-threads tr.unread{background: #f1f4ff}

#8 @DJPaul
6 years ago

  • Milestone changed from 2.4 to Future Release

#9 @DJPaul
5 years ago

  • Component changed from Appearance to Templates

#10 @DJPaul
4 years ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

#11 @DJPaul
4 years ago

Closing most tickets related to BP-Default and BP-Legacy, since the upcoming BP-Nouveau template pack (planned for 3.0) will make these redundant.

Note: See TracTickets for help on using tickets.