WordPress.org

Making WordPress.org

Opened 2 years ago

Closed 2 years ago

#2226 closed defect (fixed)

Support Theme: Large blocks of code result in double scroll bars

Reported by: bcworkz Owned by: SergeyBiryukov
Milestone: Priority: normal
Component: Support Forums Keywords:
Cc:

Description

For what ever reason, using the code button or backticks to demarcate blocks of code yields pre and code HTML elements nested together. They both have CSS set to max-height: 40em;. In lengthy code that contains long lines, the included code's width exceeds the container's width, so a horizontal scroll bar appears for the inner <code> container. There's also a vertical scroll bar due to the length of the included code. When the horizontal scroll bar is added, the inner <code> container's height exceeds the outer <pre> container's height, so it too displays a vertical scroll bar, resulting in double bars. If the outer container's max-height property were slightly larger than the inner, the double scroll bar should never appear.

The following attached screenshot came from this forum post: https://wordpress.org/support/topic/custom-post-type-with-categories-and-tags-checkbox-disabled/

The browser is the latest available FF for Ubuntu. The same occurs for all Ubuntu browsers I have installed. Container's growing when scroll bars are added may be an Ubuntu only thing. I haven't been able to test other O/Ss.

Attachments (1)

double-scroll.jpg (87.9 KB) - added by bcworkz 2 years ago.

Download all attachments as: .zip

Change History (4)

@bcworkz
2 years ago

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Support Forums

#2 @SergeyBiryukov
2 years ago

Caused by box-sizing property in the new theme:

html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

pre { box-sizing: content-box; } fixes it for me.

#3 @SergeyBiryukov
2 years ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from new to closed

In 4351:

Support Theme: Prevent double scrollbars on large blocks of code.

Fixes #2226.

Note: See TracTickets for help on using tickets.