プロジェクト

全般

プロフィール

Vote #80947

未完了

Calendar View / The right side of the tooltip is cut off

Admin Redmine さんが約2年前に追加. 約2年前に更新.

ステータス:
Confirmed
優先度:
通常
担当者:
-
カテゴリ:
Calendar_36
開始日:
2022/05/09
期日:
進捗率:

0%

予定工数:
category_id:
36
version_id:
33
issue_org_id:
33673
author_id:
5674
assigned_to_id:
0
comments:
1
status_id:
9
tracker_id:
1
plus1:
0
affected_version:
closed_on:
affected_version_id:
ステータス-->[Confirmed]

説明

h2. Summary

The right side of the tooltip is cut off at the Calendar View.

h2. Description

In normal mode, the right side of the issue's tooltip is clipped.
The contents of the tooltip are hidden under the sidebar.

In responsive mode, not only the right side of the issue but also the issues on Friday are the same.

h2. Environment

Environment:
  Redmine version                4.1.1.stable.19819
  Ruby version                   2.5.3-p105 (2018-10-18) [x86_64-darwin18]
  Rails version                  5.2.4.2
  Environment                    development
  Database adapter               SQLite
  Mailer queue                   ActiveJob::QueueAdapters::AsyncAdapter

The trunk is the same situation.

h2. Visual Proof / Screenshot

!sample-capture.png!

h2. Expected Results

The tooltip is displayed without cutting off.

h2. Actual Results

Cut off because of the content's overflow.

h2. Workaround

Modify the application.css and responsive.css

h3. application.css

Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css  (revision 19834)
+++ public/stylesheets/application.css  (working copy)
@@ -109,6 +109,7 @@
 #content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 6px 10px 10px 10px; overflow-x: auto;}
 html>body #content { min-height: 600px; }
 * html body #content { height: 600px; } /* IE */
+html>body.controller-calendars.action-show #content { overflow-x: visible; }

 #main.nosidebar #sidebar{ display: none; }

I'm not sure if the changing of overflow-x has some unexpected effects, so I specify more specific conditions.
(Calendar view only)

h3. responsive.css

Index: public/stylesheets/responsive.css
===================================================================
--- public/stylesheets/responsive.css   (revision 19834)
+++ public/stylesheets/responsive.css   (working copy)
@@ -847,6 +847,9 @@
     margin-left: 0;
     width: 100%;
   }
+
+  /* calendar tooltip */
+  table.cal td:not(.week-number):nth-child(n+5) span.tip { right: 10px; }
 }

 @media all and (max-width: 599px) {

h3. Result

!after-normal-mode.png!

!after-responsive-mode.png!


journals

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

Admin Redmine さんが約2年前に更新

  • カテゴリCalendar_36 にセット
  • 対象バージョンCandidate for next minor release_33 にセット

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

いいね!0
いいね!0