Uploaded image for project: 'phpBB'
  1. phpBB
  2. PHPBB-16575

Responsive layout for post edit buttons pulldown calculates width = zero

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: Major Major
    • None
    • 3.3.1
    • Viewing posts
    • PHP 7.20, XAMPP 7.2, all browsers

      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>
      

            Unassigned Unassigned
            HB HB
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: