We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Problem with the Horizontal Scrollbar

Thread ID:

Created:

Updated:

Platform:

Replies:

149847 Dec 11,2019 02:40 PM UTC Dec 18,2019 07:03 AM UTC Angular - EJ 2 3
loading
Tags: Schedule
Bob Fiering
Asked On December 11, 2019 02:40 PM UTC

Hi,

I am working with Angular 8.23.x and I have problems with the visibility of the horizontal scroll-bar of the Timeline-View (Resources on the left side, grouped).
The ejs-schedule is positioned in the left pane of an ejs-splitter. In the right pane is an ejs-grid component.

When I don't provide a height in the scheduler, the height is only about 50% of the screen and it shows the horizontal scroll-bar.
The height of the eps-splitter pane is the full 100% of the screen, so (according to the documentation) the height should automatic take the full height.
As soon as I provide a height in the properties of the ejs-schedule tag or in the corresponding css file the scheduler is this height but I loses the horizontal scroll-bar.
It is simply not there anymore.

Is there some configuration I have overlooked?
Hope someone can help me out with this strange behaviour.

Kind regards,

Bob

The structure is as follows:
<div class="toolbar">
  <app-planning-toolbar>
  </app-planning-toolbar>
</div>

  <div id='container'>
    <ejs-splitter #horizontal separatorSize=3>
      <e-panes>
        <e-pane size='70%' min='30%'  [collapsible]='true'>
          <ng-template #content>
          <ejs-schedule
            cssClass='virtual-scrolling'
            #scheduleObj
            id='Schedule'
            [currentView]="setView"
            [views] = "setViews"
            [eventSettings]= "eventObject"
            [selectedDate]="setDate"
            [allowDragAndDrop]="schedulerDragAndDrop"
            [allowResizing]="true"
            [group]="groupData"
            [rowAutoHeight]="rowAutoHeight"
            [showWeekNumber]="showWeekNumber"
            [workHours]="scheduleHours"
            [startHour]="startHour"
            [endHour]="endHour"
            [firstDayOfWeek]="weekFirstDay"
            [timeScale]="timeScale"
            [showHeaderBar]="showHeaderBar"
            (eventRendered)="oneventRendered($event)"
            (dragStart)="onDragStart($event)"
            (resizeStart)="onResizeStart($event)"
            (actionBegin)="onActionBegin($event)">
            <e-resources>
              <e-resource
                field="ResourceID"
                title="Resource Name"
                name="Resources"
                textField="Name"
                idField="Id"
                [dataSource]="resourceDataSource">
              </e-resource>
              <e-resource
                field ="GroupID"
                title = "Group Name"
                name = "Departments"
                [dataSource] = "groupDataSource"
                textField="Name"
                idField="Id"
                colorField="Color"
                groupIDField="GroupID">
              </e-resource>
            </e-resources>
            <e-header-rows>
              <e-header-row option='Week'>
                <ng-template #template let-data>
                  <span [innerHTML]="getWeekDetails(data)"></span>
                </ng-template>
              </e-header-row>
              <e-header-row option='Date'></e-header-row>
              <e-header-row option='Hour'></e-header-row>
            </e-header-rows>
            <e-views>
              <!--          Lazy loading for all views-->
              <e-view
                option="TimelineDay"
                [allowVirtualScrolling]="virtualscroll"
                displayName="Dag">
              </e-view>
              <e-view
                option="TimelineWorkWeek"
                [allowVirtualScrolling]="virtualscroll"
                displayName="Werkweek">
              </e-view>
              <e-view
                option="TimelineWeek"
                [allowVirtualScrolling]="virtualscroll"
                displayName="Week">
              </e-view>
              <e-view
                option="TimelineMonth"
                [allowVirtualScrolling]="virtualscroll"
                displayName="Maand">
              </e-view>
            </e-views>
            <!--        Set time format for the major timescale-->
            <ng-template #timeScaleMajorSlotTemplate let-data>
              <div class="majorTime">{{getMajorTime(data.date)}}</div>
            </ng-template>
          </ejs-schedule>
          <!--      Context Menu for the Planning Events-->
          <ejs-contextmenu
            #menuSchedulerObj
            cssClass='schedule-context-menu'
            target='.e-schedule'
            [items]='menuItems'
            (beforeOpen)='onContextMenuScheduleBeforeOpen($event)'
            (select)='onMenuItemScheduleSelect($event)'>
          </ejs-contextmenu>
          </ng-template>
        </e-pane>
        <e-pane  size='30%' min='30%' [collapsible]='true'>
          <ng-template #content>
                <ejs-grid
                  id='Grid'
                  #gridObj
                  [dataSource]="servicePlanItems"
                  [allowGrouping]="true"
                  [allowSorting]="true"
                  [allowFiltering]="true"
                  [filterSettings]="filterOptions"
                  [allowSelection]="true"
                  [allowRowDragAndDrop]="gridDragAndDrop"
                  [editSettings]='editSettings'
                  [rowHeight]="rowHeight"
                  [rowDropSettings]="srcDropOptions"
                  (rowDrop)="onDragStop($event)"
                  (rowDrag)="onRowDrag($event)"
                  [contextMenuItems]="contextMenuGridItems"
                  (contextMenuClick)="contextMenuGridClick($event)"
                >
                  <e-columns>
                    <e-column
                      field="sItemMessageDate"
                      headerText="Datum"
                      textAlign="right"
                      width="75"
                      type="date"
                      format="d-M-y">
                    </e-column>
                    <e-column
                      field="sItemCompany"
                      headerText="Bedrijf"
                      textAlign="left"
                      width="175">
                    </e-column>
                    <e-column
                      field="sItemSubject"
                      headerText="Onderwerp"
                      textAlign="left"
                      width="200">
                    </e-column>
                    <e-column
                      field="sItemMFName"
                      headerText="Code"
                      textAlign="left"
                      width="70">
                    </e-column>
                  </e-columns>
                </ejs-grid>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  </div>

<style>
  .e-splitter.e-splitter-horizontal .e-pane.e-pane-horizontal, .e-splitter.e-splitter-vertical .e-pane.e-pane-horizontal {
    overflow: scroll;
  }
</style>

     

Hareesh Balasubramanian [Syncfusion]
Replied On December 12, 2019 05:30 PM UTC

Hi Bob, 

Greetings from Syncfusion Support. 

Based on your shared code we have prepared a sample, the scheduler component is render’s properly inside the splitter component layouts in Angular 8 cli version, which can be downloaded from the following link, 

Please try the above sample, if you have any concerns please revert us back for further assistance. 
 
Regards, 
Hareesh 


Bob Fiering
Replied On December 17, 2019 11:22 AM UTC

Hi Hareesh,

I was a few days outside the office and had now time to look at your sample.
The structure was mostly the same and dit not solve the problem.
However I saw in your sample no CSS what so ever, so I commented out my complete CSS datafile, immediatly the horizontal scrollbar appeared. 
Part for part I enabled my CSS to see were the conflict was.
The CSS I used for the grid height was conflicting with the scheduler height and that was why the horizontal scrollbar disappeared.

Thanks for your help.

Kind regards,

Bob

Vinitha Devi Murugan [Syncfusion]
Replied On December 18, 2019 07:03 AM UTC

Hi Bob, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
M.Vinitha devi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon