Problem with the Horizontal Scrollbar

[Tim Hartog]

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]

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, 

https://www.syncfusion.com/downloads/support/forum/149847/ze/sample-95474146  

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

 

Regards, 

Hareesh 

[Tim Hartog]

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]

Hi Bob, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

M.Vinitha devi