Details
-
Bug
-
Status: Closed (View Workflow)
-
Major
-
Resolution: Duplicate
-
3.3.1
-
None
-
PHP 7.20, XAMPP 7.2, all browsers
Description
When the window width it too narrow to accommodate the post edit buttons, the responsive layout collapses the buttons to a single "..." button with a dropdown. Starting in phpBB 3.3.1, the pulldown width is incorrectly calculated (see attached screen captures).
This regression appears to be due to jQuery 3.5.1; reverting the version to jQuery 3.4.1 used in the prior phpBB release avoids the problem.
To reproduce, modify viewtopic_body.html to have enough tool buttons to require the layout to change to the "..." format. For my testcase, I simply copied the existing 5 buttons in the original template (see below).
Screenshots demonstrating the problem:
- phpbb331_post_buttons1.png - modified UI with additional buttons
- phpbb331_post_buttons2.png - window resized to responsive layout with "..." button
- phpbb331_post_buttons_bug.png - dropdown layout problem
- phpbb331_post_buttons_bug_jquery341.png - workaround with jQuery 3.4.1
Testcase viewtopic_body.html modification
<ul class="post-buttons"> |
<!-- EVENT viewtopic_body_post_buttons_before -->
|
<!-- IF postrow.U_EDIT -->
|
<li>
|
<a href="{postrow.U_EDIT}" title="{L_EDIT_POST}" class="button button-icon-only"> |
<i class="icon fa-pencil fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_EDIT}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_DELETE -->
|
<li>
|
<a href="{postrow.U_DELETE}" title="{L_DELETE_POST}" class="button button-icon-only"> |
<i class="icon fa-times fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_DELETE}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_REPORT -->
|
<li>
|
<a href="{postrow.U_REPORT}" title="{L_REPORT_POST}" class="button button-icon-only"> |
<i class="icon fa-exclamation fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_REPORT}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_WARN -->
|
<li>
|
<a href="{postrow.U_WARN}" title="{L_WARN_USER}" class="button button-icon-only"> |
<i class="icon fa-exclamation-triangle fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_WARN}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_INFO -->
|
<li>
|
<a href="{postrow.U_INFO}" title="{L_INFORMATION}" class="button button-icon-only"> |
<i class="icon fa-info fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_INFORMATION}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_QUOTE -->
|
<li>
|
<a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}" class="button button-icon-only"> |
<i class="icon fa-quote-left fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_QUOTE}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_EDIT -->
|
<li>
|
<a href="{postrow.U_EDIT}" title="{L_EDIT_POST}" class="button button-icon-only"> |
<i class="icon fa-pencil fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_EDIT}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_DELETE -->
|
<li>
|
<a href="{postrow.U_DELETE}" title="{L_DELETE_POST}" class="button button-icon-only"> |
<i class="icon fa-times fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_DELETE}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_REPORT -->
|
<li>
|
<a href="{postrow.U_REPORT}" title="{L_REPORT_POST}" class="button button-icon-only"> |
<i class="icon fa-exclamation fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_REPORT}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_WARN -->
|
<li>
|
<a href="{postrow.U_WARN}" title="{L_WARN_USER}" class="button button-icon-only"> |
<i class="icon fa-exclamation-triangle fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_WARN}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_INFO -->
|
<li>
|
<a href="{postrow.U_INFO}" title="{L_INFORMATION}" class="button button-icon-only"> |
<i class="icon fa-info fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_INFORMATION}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- IF postrow.U_QUOTE -->
|
<li>
|
<a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}" class="button button-icon-only"> |
<i class="icon fa-quote-left fa-fw" aria-hidden="true"></i><span class="sr-only">{L_BUTTON_QUOTE}</span> |
</a>
|
</li>
|
<!-- ENDIF -->
|
<!-- EVENT viewtopic_body_post_buttons_after -->
|
</ul>
|
Attachments
Issue Links
- duplicates
-
-
- Closed
-