1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Popup windows limited to Schedule element size.

Popup windows limited to Schedule element size.

Hi.

When using the Schedule with the Timeline views, the popup windows are limited to the size of the Schedule.
If i open the calendar or have a EditorTemplate bigger than the default it will not show everything.

I think the popup windows, should not be limited to the Schedule element. They should appear on top of the Schedule element.

   

I have CSS code to downsize the row heigth...

<style>
     .e-schedule .e-timeline-month-view .e-date-header-wrap table col, .e-schedule .e-timeline-month-view .e-content-wrap table col,
    .e-schedule .e-timeline-year-view .e-date-header-wrap table col, .e-schedule .e-timeline-year-view .e-content-wrap table col {
        width: 40px !important;
    }
    .e-schedule .e-timeline-month-view .e-month-header, .e-schedule .e-timeline-month-view .e-work-cells,
    .e-schedule .e-timeline-year-view .e-month-header, .e-schedule .e-timeline-year-view .e-work-cells {
        height: 58px;
    }
</style>
         @(Html.EJS().Schedule("Schedule").QuickInfoOnSelectionEnd().Height("100%").Width("100%")//.CellTemplate("#apptemplate")
.EventSettings(e => e.DataSource(d => d.Url(@Url.Action("LoadData","RelogioPonto"))
.CrudUrl(@Url.Action("UpdateData","RelogioPonto")).Adaptor("UrlAdaptor").CrossDomain(true)))
.Views(view =>
                  {
                                    view.Option(View.TimelineDay).IsSelected(true).Add();
                                    view.Option(View.TimelineWeek).IsSelected(true).Add();
                                    view.Option(View.TimelineWorkWeek).IsSelected(true).Add();
                                    view.Option(View.TimelineMonth).IsSelected(true).Add();
                                    view.Option(View.TimelineYear).IsSelected(true).Add();
                                })
                                .Render()
                    )


 


11 Replies
VD Vinitha Devi Murugan Syncfusion Team September 24, 2021 11:08 AM UTC

Hi Emiliano, 
 
Greetings from Syncfusion Support. 
 
We have validated your reported issue “Popup windows limited to Schedule element size.” at our end and let you know that when height of the Scheduler is given as 100% percentage, it will make the Scheduler as wide as the parent container. So we suggest you to set some height to parent container to resolve your reported issue for the same we have shared below sample for your reference. 
 
 
<div class="content-wrapper"> 
  @(Html.EJS().Schedule("Schedule").QuickInfoOnSelectionEnd().Height("100%").Width("100%")//.CellTemplate("#apptemplate") 
.EventSettings(e => e.DataSource(d => d.Url(@Url.Action("LoadData","RelogioPonto")) 
.CrudUrl(@Url.Action("UpdateData","RelogioPonto")).Adaptor("UrlAdaptor").CrossDomain(true))) 
.Views(view =>{ 
  view.Option(View.TimelineDay).IsSelected(true).Add(); 
  view.Option(View.TimelineWeek).IsSelected(true).Add(); 
  view.Option(View.TimelineWorkWeek).IsSelected(true).Add(); 
  view.Option(View.TimelineMonth).IsSelected(true).Add(); 
  view.Option(View.TimelineYear).IsSelected(true).Add(); 
  }).Render() 
) 
</div> 
<style> 
  .content-wrapper { 
    height: 500px; 
  } 
</style> 
 
Please refer below UG for more information. 
 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


EM Emiliano September 24, 2021 03:01 PM UTC

Thanks for your answer.

I understand that the height of the parent div affects the height of the Schedule.

But in my case, i need the cells of the Schedule to be square. So i reduced the row height and when i tried to change the month in the calendar popup, i couldn't select other months like the first image shows.

And i will be using a editor template, and it have the same problem. The popup shouldn't be limited to the Schedule size. It should overlap the Schedule component and have the size it normally have.

PS: The first image is in Timeline Day, but it should be in Timeline Month. The problem it only shows the first four months of the year:

 


VD Vinitha Devi Murugan Syncfusion Team September 27, 2021 09:59 AM UTC

Hi Emiliano, 
  
Thanks for your update. 
  
We have validated your requirement “But in my case, i need the cells of the Schedule to be square. So i reduced the row height and when i tried to change the month in the calendar popup, i couldn't select other months like the first image shows” at our end. To achieve your requirement, we suggest you to use below CSS in your sample and same can be available in below sample. 
  
  
      .e-schedule .e-header-popup.e-lib.e-popup.e-control.e-popup-open { 
        height: 100%; 
        max-height: 282px; 
        overflow-y: auto; 
      } 
  
Also, let you know that we could not face any issue with editor template popup. Please refer below image. 
 
  
Kindly try with the above solution. If you still facing the same problem share us the below details to serve your better.  
  • Replicate your problem in the above shared sample or
  • Share a sample illustrating the problem which would help us to proceed further.
Regards, 
Vinitha 
  


EM Emiliano September 27, 2021 11:30 AM UTC

Thanks for answering.

The sample you give, does not solve the problem. It only helps to select another month, but the "problem" maintains.

I understand your solution, but i think it's not ideal or the correct one. Because i have space, so i don't have to be limited to the schedule height!

I will show what it should be the correct behaviour of the Schedule popup:

 

And the same behaviour for this popup:
(Sorry if i mislead you with " EditorTemplate" name. I mean the popup up one with the buttons "More details" and "Save".)





VD Vinitha Devi Murugan Syncfusion Team September 28, 2021 10:24 AM UTC

Hi Emiliano, 
 
Thanks for your update. 
 
We have validated your reported issue “I understand your solution, but i think it's not ideal or the correct one. Because i have space, so i don't have to be limited to the schedule height” at our end and let you know that scheduler popup’s are rendered based on the scheduler height and popup’s are not aware of out side available spaces which is our scheduler default behavior. So we suggest you to use the below workaround or previously provided workaround to resolve the problem. 
 
 
popupOpen: function (args) { 
    // position quick info popups 
    if (args.type == 'QuickInfo' && this.currentView === 'TimelineMonth') { 
      args.element.style.position = 'fixed'; 
    } else { 
      args.element.style.position = 'absolute'; 
    } 
  }, 
 
/* position header popup */ 
      .e-schedule .e-header-popup.e-lib.e-popup.e-control.e-popup-open { 
        position: fixed; 
      } 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


EM Emiliano September 28, 2021 10:51 AM UTC

Thanks.

The QuickInfo popup it's working ok.

But the Calendar popup, don't.

If you use the last sample you send me, and i tested in my app too, the calendar popup it's fixed in that position.

It worked ok in your stackblitz by coincidence.



VD Vinitha Devi Murugan Syncfusion Team September 29, 2021 01:17 PM UTC

Hi Emiliano, 
 
Sorry for the inconvenience. 
 
We have validated your reported issue “the calendar popup it's fixed in that position” at our end and we could able to reproduce your reported issue in mvc application. We suggest you to use below CSS in your application to resolve position problem and same can be available in below sample. 
 
 
.e-schedule .e-header-popup.e-lib.e-popup.e-control.e-popup-open { 
    top: unset !important; 
    position: fixed; 
} 
 
Output: 
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


EM Emiliano September 29, 2021 02:26 PM UTC

The problem is not corrected!


VD Vinitha Devi Murugan Syncfusion Team September 30, 2021 12:27 PM UTC

Hi Emiliano, 
 
Sorry for the inconvenience. 
 
We have validated your reported issue and suggest you to position the header-popup using dataBound event like below to overcome the problem. 
 
 
.DataBound("onDataBound").Render() 
<script> 
    var flag = true; 
    function onDataBound(args) { 
        if (flag ) { 
            (document.querySelector('.e-date-range')).click(); 
            (document.querySelector('.e-date-range')).click(); 
            var styleValue = document.querySelector('.e-schedule .e-date-range').getBoundingClientRect(); 
            document.querySelector('.e-schedule .e-header-popup ').style.left = styleValue.left + 'px'; 
            document.querySelector('.e-schedule .e-header-popup ').style.top = styleValue.bottom + 'px'; 
            flag = false; 
        } 
    } 
</script> 
<style> 
.e-schedule .e-header-popup.e-lib.e-popup.e-control.e-popup-open { 
    position: fixed; 
} 
</style> 
 
Output: 
 
Kindly try with the above solution and get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


EM Emiliano October 1, 2021 10:39 AM UTC

It worked! Thanks.


NR Nevitha Ravi Syncfusion Team October 4, 2021 04:27 AM UTC

Hi Emiliano, 

You are welcome..! We are glad that our provided solution helped you. Please let us know if you need any further assistance. 

Regards, 
Nevitha 


Loader.
Up arrow icon