[Silk UI Web] Calendar Pattern not displaying correctly

[Silk UI Web] Calendar Pattern not displaying correctly

  
Forge Component
(71)
Published on 4 Oct by OutSystems R&D
71 votes
Published on 4 Oct by OutSystems R&D

Hi,

I'm using the calendar control pattern in my personal environment. 

I found that it's not displaying correctly, I'm attaching an image. In this case it's in a popup, but also happens on a regular webscreen. 

This does't happen while using the deprecated version.

Hey Bruno!

Can you send us the OML with the issue? Or a new OML with the issue happening?

Hi Bruno,


From what I can see, it looks like you are using the PopupEditor from RichWidgets, and the page you are trying to render doesn't have the Layout Popup from Silk.


This happens only inside popups or also in a regular screen with any Silk UI theme?


Cheers

Hi, 


Thanks for your replies, the display problem was due to outdated references, even though I had published a solution. Solved it now, however one issue remains, specifically related with using the new version of the calendar pattern inside popups. 

With the old one, on activating the calendar, if there isn't enough space bellow, for example, to show the whole calendar, a scroll bar is added, and it's possible to scroll down and use the calendar. 

With the new one, the calendar will position itself on top of the input, and there will be no scroll bar, so beyond the top of the popup, the calendar is cut off and not usable.    

I'm attaching an image that shows the issue. New above, old below.


Have any of you encountered this? Any suggestions?


Thanks in advance.

Hi Bruno,

Using a calendar inside a popup is often a bad experience for users, still, let me give you some suggestions to solve your problem:

  • You can manually set the position where the calendar opens using the "Align" input parameter
  • You can use the "flat" calendar and avoid the "popup" problem
  • You can also set the size of the popup to assure there will be enough space for all content

Hope this helps :)