Anyone else notice that if you wrap something that contains really long lines with
[code] tags, that it'll look okay in the actual post, but if you browse your post history afterwards, it'll render much wider than the surrounding posts and throw everything out?
Here's an example of what I mean: I recently posted some code that contained a few really long lines,
here. If you look at that post, it renders without issue (i.e. that post doesn't render wider than the other posts in that thread). But, if you look (currently) at the
first page of my post history, you'll see that the posts on that page are rendering strangely, making them difficult to read without lots of horizontal scrolling.
I messed around for a few (very frustrating) hours trying to get to the bottom of this, and managed to come up with the following SMF patch:
--- /var/www/baseline/Themes/default/Profile.template.php
2007-02-03 15:55:14.000000000 +0000
+++ /var/www/modified/Themes/default/Profile.template.php
2023-01-06 00:15:50.000000000 +0000
@@ -341,42 +341,45 @@
if (!empty($context['posts']))
{
// Page numbers.
echo '
', $txt[139], ': ', $context['page_index'], '
|
';
// Button shortcuts
$quote_button = create_button('quote.gif', 145, 'smf240', 'align="middle"');
$reply_button = create_button('reply_sm.gif', 146, 146, 'align="middle"');
$remove_button = create_button('delete.gif', 121, 31, 'align="middle"');
$notify_button = create_button('notify_sm.gif', 131, 125, 'align="middle"');
// For every post to be displayed, give it its own subtable, and show the important details of the post.
foreach ($context['posts'] as $post)
{
+
// style="table-layout: fixed;" was added to each subtable as a partial fix for code sometimes rendering too wide (see https://bitcointalk.org/index.php?topic=5432954).
+
// This could also have been done further up the hierarchy, but this is a more natural place to apply the fix, and (surprisingly) produces slightly superior results, too.
+
// There's a second (progressive enhancement) part to this fix, after this foreach.
echo '
-
+
', $post['counter'], '
|
', $post['category']['name'], ' / ', $post['board']['name'], ' / ', $post['subject'], '
|
', $txt[30], ': ', $post['time'], '
|
', $post['body'], '
|
@@ -391,40 +394,67 @@
if ($post['can_reply'])
echo '
', $reply_button, '', $context['menu_separator'], '
', $quote_button, '';
if ($post['can_reply'] && $post['can_mark_notify'])
echo '
', $context['menu_separator'];
if ($post['can_mark_notify'])
echo '
' . $notify_button . '';
echo '
|
|
';
}
+ // This is the second part of the fix for code sometimes rendering too wide (the first part is at the top of the preceding foreach).
+ // The first part only prevents the problem from affecting surrounding posts, but when JavaScript is available, a more complete fix can be made.
+ // This code visits each eligible element and (defensively) sets the width to the same computed value.
+ // The width is computed once and then reused, not because of performance considerations (that's a nice consequence), but because that approach fixed some (rare) problem cases that came up in testing.
+ // The initial version of this code didn't account for the presence of elements being browser-dependent (that's what the "target" variable now does).
+ echo '
+ ';
+
// Show more page numbers.
echo '
', $txt[139], ': ', $context['page_index'], '
|
';
}
// No posts? Just end the table with a informative message.
else
echo '
', $txt[170], '
|
';
}
: Updated to account for browser differences
pointed out by shahzadafzal.
@theymos: Please consider merging this fix, or applying your mind to the problem and coming up with something better. Thanks!
So, I ended up sinking more time into this problem and coming up with a (much) better patch...
(Thanks to PX-Z for the script they left
here, those particular DOM modifications weren't the ones I ended up using, but, the final fix I arrived at was definitely influenced by that post.)
--- baseline/Themes/default/Profile.template.php
2007-02-03 15:55:14.000000000 +0000
+++ modified/Themes/default/Profile.template.php
2024-04-27 20:51:35.000000000 +0000
@@ -346,43 +346,48 @@
', $txt[139], ': ', $context['page_index'], '
| ';
// Button shortcuts
$quote_button = create_button('quote.gif', 145, 'smf240', 'align="middle"');
$reply_button = create_button('reply_sm.gif', 146, 146, 'align="middle"');
$remove_button = create_button('delete.gif', 121, 31, 'align="middle"');
$notify_button = create_button('notify_sm.gif', 131, 125, 'align="middle"');
+
// Controls whether or not an effort is made to prevent "wide" content from breaking the layout (e.g. code blocks containing really long lines).
+
$with_wide_fix = true;
+
// For every post to be displayed, give it its own subtable, and show the important details of the post.
foreach ($context['posts'] as $post)
{
echo '
', $post['counter'], '
|
', $post['category']['name'], ' / ', $post['board']['name'], ' / ', $post['subject'], '
|
', $txt[30], ': ', $post['time'], '
|
-
+ ', $with_wide_fix ? '
+
+ ' : '', '
', $post['body'], '
|
';
if ($post['can_delete'])
echo '
', $remove_button, '';
if ($post['can_delete'] && ($post['can_mark_notify'] || $post['can_reply']))
I also came up with a patch that fixes this problem when previewing PMs and when replying to PMs:
--- baseline/Themes/default/PersonalMessage.template.php 2006-12-01 15:43:03.000000000 +0000
+++ modified/Themes/default/PersonalMessage.template.php 2024-04-27 20:51:50.000000000 +0000
@@ -855,29 +855,32 @@
';
foreach ($context['send_log']['sent'] as $log_entry)
echo '', $log_entry, '
';
foreach ($context['send_log']['failed'] as $log_entry)
echo '', $log_entry, '
';
echo '
|
|
';
}
+ // Controls whether or not an effort is made to prevent "wide" content from breaking the layout (e.g. code blocks containing really long lines).
+ $with_wide_fix = true;
+
// Show the preview of the personal message.
if (isset($context['preview_message']))
echo '
-
+
', $context['preview_subject'], ' |
', $context['preview_message'], '
|
';
// Main message editing box.
echo '
@@ -985,30 +988,30 @@
';
// Some hidden information is needed in order to make the spell checking work.
if ($context['show_spellchecking'])
echo '
';
// Show the message you're replying to.
if ($context['reply'])
echo '
-
+
', $txt[319], ': ', $context['quoted_message']['subject'], ' |
-
+ |
', $txt[318], ': ', $context['quoted_message']['member']['name'], ' |
', $txt[30], ': ', $context['quoted_message']['time'], ' |
|
', $context['quoted_message']['body'], ' |
';
|
