Schedule views disappearance

[Carla Candiotti]

Hello,

I would like to layout a view containing a schedule and a div aside. I am not using bootstrap so I tried with flexbox or Angular Material Grid List. The issue is the same: when applying these styles, the scheduler views buttons disappear when clicking on it. I noticed that when adding bootstrap, the issue no longer persists. 

Do I have to use bootstrap to layout views containing a schedule?

See an example below forked from schedule resources demo:

https://stackblitz.com/edit/angular-h2gbjz?file=app.component.html,app.component.css,index.html

I hope my question is clear.

Thanks for your response!

[Ravikumar Venkatesan]

In your shared sample, you have rendered the Schedule inside multiple div elements and set the display flex to the top div element. Due to the initial rendering of the Schedule, the Toolbar was unable to get the full width of the page. Because of that, your reported problem occurs. You can resolve it by setting up the width of the div element that contains the Schedule, as shown in the below snippet.

Sample: https://stackblitz.com/edit/ej2-angular-schedule-toolbar-views-moved-to-popup-mode?file=app.component.html

[app.component.html]

<div class="page-container">

  <div class="schedule-container">

    <div class="content-wrapper">

      <ejs-schedule #scheduleObj cssClass="schedule-resource" width="100%" height="650px" [selectedDate]="selectedDate"

        [eventSettings]="eventSettings">

        <e-resources>

          <e-resource field="OwnerId" title="Owners" [dataSource]="resourceDataSource" [allowMultiple]="allowMultiple"

            name="Owners" textField="OwnerText" idField="OwnerId" colorField="Color">

          </e-resource>

        </e-resources>

      </ejs-schedule>

    </div>

  </div>

</div>

[app.component.css]

.page-container {

  display: flex;

}

 

.schedule-container {

  width: 100%;

}

 If this post is helpful, kindly consider accepting it as the solution so that other members can locate it more quickly.