プロジェクト

全般

プロフィール

Vote #80852

完了

Fix invalid selector in function displayTabsButtons()

Admin Redmine さんが3年以上前に追加. 3年以上前に更新.

ステータス:
Closed
優先度:
通常
担当者:
-
カテゴリ:
Code cleanup/refactoring_30
対象バージョン:
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
30
version_id:
152
issue_org_id:
33392
author_id:
107353
assigned_to_id:
332
comments:
8
status_id:
5
tracker_id:
1
plus1:
0
affected_version:
closed_on:
affected_version_id:
99
ステータス-->[Closed]

説明

Below it's a snippet from @displayTabsButton()@ function:


    var bw = $(el).parents('div.tabs-buttons').outerWidth(true);

    if ((tabsWidth < el.width() - bw) && (lis.length === 0 || lis.first().is(':visible'))) {
      el.find('div.tabs-buttons').hide();
    } else {
      el.find('div.tabs-buttons').show().children('button.tab-left').toggleClass('disabled', numHidden == 0);
    }

Selector @parents('div.tabs-buttons')@ from line @var bw = $(el).parents('div.tabs-buttons').outerWidth(true);@ never finds any element because @div.tabs-buttons@ is not a parent of @div.tabs@.

On jQuery 2, @var gw = $(el).parents('div.tabs-buttons').outerWidth(true);@ is null which means 0+.
On jQuery 3, @var gw = $(el).parents('div.tabs-buttons').outerWidth(true);@ is undefined which means NaN.

Because of this change, the condition @(tabsWidth < el.width() - bw)@ always return false on jQuery 3 because @gw@ is NaN and tabsButton are displayed.
!tabs.png!

The attach patch fixes this incorrect behaviour and also replaces some inline styles with class @hidden@.


journals

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
I found that the patch changes the behavior of the button.

After applying the patch, the buttons show up even when there are no hidden tabs.

*Before:*
!{width: 1014px; border: 1px solid grey;}.different-behavior-before.png!

*After:*
!{width: 1014px; border: 1px solid grey;}different-behavior-after.png!
--------------------------------------------------------------------------------

--------------------------------------------------------------------------------
I've removed from the patch the changes related to the "hidden" class because are irrelevant. Please retest it because on my environment I cannot reproduce the problem on all resolutions.

The problem that you say reproduces only on widths between 1120px - 1140px:
1120px Tab buttons appear:
!{border: 1px solid grey;}.1120.png!

1141px Tab buttons disappear :
!{border: 1px solid grey;}.1141.png!

Is it correct?
--------------------------------------------------------------------------------
Committed the patch. Thank you.
--------------------------------------------------------------------------------
Go MAEDA wrote:
> Committed the patch. Thank you.

Thanks for committing this. FTR, we can easily fix the issue with those 20px, but working on it, I've found multiple issues, for example: resize the window, navigate to right until "+" and "Overview" tabs are hidden, then expand the window to the maximum. Observe that the hidden tabs are not automatically displayed even if it's enough space. I decided to try to find a better solution, but it'll take some time.
--------------------------------------------------------------------------------


related_issues

relates,Closed,33383,Update jQuery to 3.5.1

Admin Redmine さんが3年以上前に更新

  • カテゴリCode cleanup/refactoring_30 にセット
  • 対象バージョン4.2.0_152 にセット

他の形式にエクスポート: Atom PDF

いいね!0
いいね!0