Timeline not adjusting to the parent container width

[Peter Vledder]

Hi,

I got a simple page with a schedule on it. In the past the schedule width would be automatically adjusted to the parent container but it doesnt do that and shows a scroll bar instead. Any idea how to fix this?

Best Regards,

Peter

My code:

<template>

    <f7-page>

        <f7-navbar title="App Roles">

            <f7-nav-right>

                <f7-link style="margin-right:15px" icon-size="20" icon="far fa-user-plus" color="orange"></f7-link>   

            </f7-nav-right>

        </f7-navbar>

        <f7-toolbar bottom-aurora>

            <div class="left"></div>

            <div class="right">{{$store.state.version}}</div>

        </f7-toolbar>

        <div style="width:1000px">

            <ejs-schedule ref="schedule" :selectedDate='selectedDate' :eventSettings='eventSettings' :timeScale="timeScale">

            <e-views>

                <e-view option="TimelineDay"></e-view>

                <e-view option="TimelineWeek"></e-view>

            </e-views>            

            </ejs-schedule>

        </div>

        

    </f7-page>

</template>

<script>

    import {shared} from '../js/mixin.js'

    import {rest} from '../js/rest-functions.js'

    import Vue from "vue";

    import {SchedulePlugin, TimelineViews, Day, Week, WorkWeek, Month, Agenda} from "@syncfusion/ej2-vue-schedule";

    Vue.use(SchedulePlugin);

    export default {

        mixins: [shared, rest],

        data() {

            return {

                selectedDate: new Date(2018, 1, 15),

                timeScale: {enable: true, interval: 60, slotCount: 2},

                eventSettings: {

                    dataSource: [{

                    Id: 1,

                    Subject: 'Meeting',

                    StartTime: new Date(2018, 1, 15, 10, 0),

                    EndTime: new Date(2018, 1, 15, 12, 30)

                    }]

                }

            }

        },

        provide: {

            schedule: [TimelineViews, Day, Week, WorkWeek, Month, Agenda]

        },        

        methods: {

               

        },

        mounted: function(){

            const self = this;

            const app = self.$f7;

            console.log(self.$refs.schedule)

        }

    }

</script>

<style scoped>

</style>

[Satheesh Kumar Balasubramanian]

Hi Peter, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "In the past the schedule width would be automatically adjusted to the parent container but it does not do that and shows a scroll bar instead" based on your shared details. But the sample is rendered properly and we are not clear about your issue, so please try the below sample we have tried and provide us following details to check the problem at our end. 

  

Sample:  https://www.syncfusion.com/downloads/support/forum/166864/ze/TimelineIssue-1868119704 

• Share issue replicating video with proper replication steps
• Issue replicating sample or replicate the problem in above sample
• Whether you are facing any breaking on upgrading the packages?
  
• If so, share the older and new package version details

Regards,

Satheesh Kumar B

[Peter Vledder]

Hi,

I ran your example but thats giving me exact the same output as my example above (screenshot). I would have expected to see the full day in the screen with very small (width) cells.  Except I see a scrollbar (horizontal).

Regards,

Peter

[Peter Vledder]

Update:

Once in a while I get this error in the console:

[Hareesh Balasubramanian]

Hi Peter, 

Thanks for the update. 

We have validated your shared query at our end and let you know that we can customize the work cells width using CSS but by default, we need to maintain a minimum width for work cells for the Timeline Day/week views and we are not able to reduce beyond the minimum width. And for the same, we have prepared a sample, which can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-680867544 

<template> 

<div style="width:1000px; padding-left: 15px"> 

    <ejs-schedule ref="ScheduleObj" width='100%' :selectedDate='selectedDate' :timeScale="timeScale" :eventSettings='eventSettings' height='540px'> 

        <e-views> 

            <e-view option="TimelineDay"></e-view> 

        </e-views> 

    </ejs-schedule> 

</div> 

</template> 

<style> 

.e-schedule .e-timeline-view .e-date-header-wrap table col, 

.e-schedule .e-timeline-view .e-content-wrap table col { 

    width: 15px; 

} 

 

.e-schedule .e-timeline-view .e-date-header-wrap, .e-schedule .e-timeline-month-view .e-date-header-wrap { 

    font-size: 8px; 

} 

</style> 

Kindly try the above solution, if the issue persist still please replicate the issue in a sample or share video demo of your problem to serve you better. 

Regards, 

Hareesh