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. Image for the cookie policy date

Problem with the Horizontal Scrollbar

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>

     

3 Replies

HB Hareesh Balasubramanian Syncfusion Team December 12, 2019 12:30 PM

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 



BF Bob Fiering December 17, 2019 06:22 AM

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


VD Vinitha Devi Murugan Syncfusion Team December 18, 2019 02:03 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon