Hi All, 

I am having trouble resizing a calendar control to fit within the constraints of a container. For some reason when published the calendar is always stretched and outside the boundaries of the container. What have I potentially done wrong?


This is how the calendar looks in the development environment


This is how it looks when published.

Hi Anthony,


What version of the platform? What layout are  you using? What version of the UI framework? Can you attach a sample?  Please keep in mind that the more information you provide up front, the faster and better you will get a response.


Thanks


Stacey

  •  Outsystems 11.0 
  • Using default "Common\Layout" provided by outsystems
  • Unsure about UI Framework.. Where can i check this?
  • OML file Attached

Expected look based on the development enviroment


What appears on tablet


Hi Anthony Phan,

Looks like alignment is not proper only in landscape mode right ? Are you using any external calendar ? if that is the case in landscape mode old css styles will not work properly, I mean using latest version of calendar you can avoid the issue.


Sravan

Anthony Phan wrote:

  •  Outsystems 11.0 
  • Using default "Common\Layout" provided by outsystems
  • Unsure about UI Framework.. Where can i check this?
  • OML file Attached

Expected look based on the development enviroment


What appears on tablet



Looks like issue width , when its in development it has enough width, but when comes to mobile or landscape mode it not able to occupy the space.

Are you applying width for calendar or container (  on top of calendar ) ?


Hi Anthony Phan,

I have checked oml file you have provided nothing wrong in it, That's issue with Layout means currently calendar occupied 4 columns as you see in development , this is bootstrap layout where it will divide screen into 12 columns and aligns content accordingly. In our case mobile screen will have very less space and it try to occupy only 4 columns out of it. We can increase this 10 and see it will come perfectly in mobile but desktop it will look weird as its very big. 

This is one of the problem of Outsytems mobile development, you can't have option to specify the content to occupy space based on screen size ( AS we do in normal .NET Development ).

Solution : Need to write media queries to manage this if you know css. example like below.

What it means occupy screen 80% for all medium screens ( like mobile and tablet ).

SyntaxEditor Code Snippet

@media screen and (max-width: 600px) {
.MobileCalendar{
    width:  80%;
}
}



Hope this helps

Sravan

Sravan Vanteru wrote:

Hi Anthony Phan,

I have checked oml file you have provided nothing wrong in it, That's issue with Layout means currently calendar occupied 4 columns as you see in development , this is bootstrap layout where it will divide screen into 12 columns and aligns content accordingly. In our case mobile screen will have very less space and it try to occupy only 4 columns out of it. We can increase this 10 and see it will come perfectly in mobile but desktop it will look weird as its very big. 

This is one of the problem of Outsytems mobile development, you can't have option to specify the content to occupy space based on screen size ( AS we do in normal .NET Development ).

Solution : Need to write media queries to manage this if you know css. example like below.

What it means occupy screen 80% for all medium screens ( like mobile and tablet ).

SyntaxEditor Code Snippet

@media screen and (max-width: 600px) {
.MobileCalendar{
    width:  80%;
}
}



Hope this helps

Sravan


I'm not sure i completely understand your explanation. Yes, the calendar will occupy 4 columns, but why does the height not also scale to fit?