From 9542ca701ae258a7102242bb68b3c17f8e1a580c Mon Sep 17 00:00:00 2001 From: Juho Salmio Date: Sun, 30 Aug 2015 14:00:38 +0300 Subject: [PATCH 1/3] Display last row in DatePicker in safari #1489 In safari button elements get implicit margin, which meant that the height of day buttons are higher than expected and caused the rows not fit to their container. --- src/date-picker/day-button.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/date-picker/day-button.jsx b/src/date-picker/day-button.jsx index 0505a67bd3c4ac..1bfa612435f8a9 100644 --- a/src/date-picker/day-button.jsx +++ b/src/date-picker/day-button.jsx @@ -52,6 +52,7 @@ let DayButton = React.createClass({ position: 'relative', float: 'left', width: 36, + margin: '0px', padding: '4px 2px', }, From b6ad09e74d986c13e2982a2690b4e3fc4df0b4f8 Mon Sep 17 00:00:00 2001 From: Juho Salmio Date: Sun, 30 Aug 2015 14:07:47 +0300 Subject: [PATCH 2/3] Increase the Calendar toolbar height by 1px Fixes the clipping g character in August --- src/date-picker/calendar-toolbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/date-picker/calendar-toolbar.jsx b/src/date-picker/calendar-toolbar.jsx index d4b8a2f52b566f..4e0a18b9613929 100644 --- a/src/date-picker/calendar-toolbar.jsx +++ b/src/date-picker/calendar-toolbar.jsx @@ -63,7 +63,7 @@ let CalendarToolbar = React.createClass({ top: '17px', lineHeight: '14px', fontSize: '14px', - height: '14px', + height: '15px', width: '100%', fontWeight: '500', textAlign: 'center', From 5fe7c5837383f1ed74d77a4e158d060b9d837d20 Mon Sep 17 00:00:00 2001 From: Juho Salmio Date: Sun, 30 Aug 2015 14:11:31 +0300 Subject: [PATCH 3/3] Increase calendarContainer height Increase height by 4px so that the part of the highlight circle is not clipped out when a day is selected from the last row. --- src/date-picker/calendar.jsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/date-picker/calendar.jsx b/src/date-picker/calendar.jsx index 03ba0e2c150015..c7f8129bd57ef7 100644 --- a/src/date-picker/calendar.jsx +++ b/src/date-picker/calendar.jsx @@ -82,8 +82,8 @@ let Calendar = React.createClass({ }, calendarContainer: { width: isLandscape ? 280 : '100%', - height: weekCount === 5 ? 268 : - weekCount === 6 ? 308 : 228, + height: weekCount === 5 ? 272 : + weekCount === 6 ? 312 : 232, float: isLandscape ? 'right' : 'none', transition: Transitions.easeOut('150ms', 'height'), overflow: 'hidden', @@ -91,9 +91,9 @@ let Calendar = React.createClass({ yearContainer: { width: 280, overflow: 'hidden', - height: yearCount < 6 ? yearCount * 56 + 10 : - weekCount === 5 ? 268 : - weekCount === 6 ? 308 : 228, + height: yearCount < 6 ? yearCount * 56 + 14 : + weekCount === 5 ? 272 : + weekCount === 6 ? 312 : 232, float: isLandscape ? 'right' : 'none', }, dateDisplay: {