Ineke de Raaf
Rank: #892
6Views
2Comments
Solved
[Horizontal Calendar ] Horizontal calendar in IPhone
Question
Mobile
Forge
Horizontal Calendar 
Forge component by Hugo Fagundes
4
Published on 18 Jun 2019
Application Type
Mobile

I use this component on an Iphone and it has 2 problems

1) it doesn't show the < and > arrows on the movetolastmonth and movetonextmonth buttons. It does show them on Android and in the Chrome browser. Maybe the "/HorizontalCalendar/arrow-left.svg" is not shown properly on an iphone. When I tried to make the buttons bigger the <> arrows are showing very little, so I think they are showing but they are too small. Could I change the Javascript part '<button class="move_to_last_month"> <img src="'+$parameters.IconLeft+'"> </button>',  to make the arrow bigger? (in fact it only needs to change for iphone, maybe something with .iphonex{} I think)

2) button movetonextmonth is shown apart from the calendar, it's the result of a break I think.

I changed the javscript in the OnReady of the Horizontal calendar to eliminate this behaviour, no succes yet.

'<div class="columns cols3 gutter phone-portrait-break-none phone-landscape-break-none tablet-portrait-break-none tablet-landscape-break-none break-inside: avoid">', 

'<div class="rescalendar_day_cells phone-portrait-break-none phone-landscape-break-none tablet-portrait-break-none tablet-landscape-break-none break-inside: avoid"></div>',

0
0
on 2020-11-04
Copy link to comment
Ineke de Raaf
Rank: #892
Solution

Solved this problem : I added fontsize and font-weight in CSS of Horizontal calendar otherwise the buttons will never show in IOS.  This also solved the overflow problem ! :-)

.move_to_last_month, .move_to_next_month {
    border: 0;
    width: 10%;   
    font-weight: bold!important;
    font-size: 9px!important;
}
See solution in context
0
0
on 2020-11-05
Copy link to comment
Ineke de Raaf
Rank: #892

I tried other buttons for < and > but they are not showing either on Iphone, they show properly on Android.

0
0
on 2020-11-04
Copy link to comment
Ineke de Raaf
Rank: #892
Solution

Solved this problem : I added fontsize and font-weight in CSS of Horizontal calendar otherwise the buttons will never show in IOS.  This also solved the overflow problem ! :-)

.move_to_last_month, .move_to_next_month {
    border: 0;
    width: 10%;   
    font-weight: bold!important;
    font-size: 9px!important;
}
0
0
on 2020-11-05
Copy link to comment