1. Home
  2. Forum
  3. React - EJ 2
  4. Set TimelineDay view width to 100%

Set TimelineDay view width to 100%

Hello,

I am currently working on the Schedule control with the TimelineDay view.
I want to have the whole interval displayed on my screen without a scrollbar.
Is there a way to make the whole timeline fit on the screen, without any scrollbar? 
Here is the timeline without any CSS :


And here is what i did with some CSS :


I used this piece of code to make the width of the cells smaller :
.e-schedule .e-timeline-view .e-date-header-wrap table col,
.e-schedule .e-timeline-view .e-content-wrap table col,
.e-schedule .e-timeline-month-view .e-date-header-wrap table col,
.e-schedule .e-timeline-month-view .e-content-wrap table col {
  width: 1px;
}


As you can see, no matter how small i make the width, there is still a horizontal scrollbar.
Here I am displaying 3 days, but my configuration should also allow to display 1 or 5 days, without a scrollbar.
This is a bit annoying because the space to render the timeline without a scrollbar is there. It looks like the control is adapting the width of the cells automatically so that there will always be a scrollbar.

Any help is appreciated.
Thanks a lot!



3 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team February 5, 2021 08:02 AM UTC

Hi Carter, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared query to display scheduler without scroller using CSS, which can be viewed from the following link. 


.e-schedule .e-timeline-view .e-date-header-wrap table col, 
.e-schedule .e-timeline-view .e-content-wrap table col { 
  width: 8px !important; 
} 

And for further reference, we have taken a screenshot of the above sample, 
 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 
Hareesh 


Marked as answer
JC J Carter February 5, 2021 08:24 AM UTC

Thank you for your help!

I tried to implement what you did, but the issue with this is that the events are now not displayed correctly.
Here's a screenshot for reference : 

Here, i have one event from 7am to 10am and another from 5pm to 6pm. As you can see, the events are not displayed in the right slots.
Is there a solution for this?

Thanks a lot

RV Ravikumar Venkatesan Syncfusion Team February 8, 2021 10:19 AM UTC

Hi Carter, 

Thanks for the update. 

We have validated your reported query at our end and the minimum horizontal scroller is always needed in the scheduler for the perfect positioning of the appointments. So, We suggest you to maintain the minimum horizontal scroller in the timeline views of the Schedule for the perfect positioning of the appointments, and for the same, we have prepared a sample that can be available from the below link. 


[index.css] 
.e-schedule .e-timeline-view .e-date-header-wrap table col, 
.e-schedule .e-timeline-view .e-content-wrap table col, 
.e-schedule .e-timeline-month-view .e-date-header-wrap table col, 
.e-schedule .e-timeline-month-view .e-content-wrap table col { 
  width: 6px; 
} 

Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Loader.
Up arrow icon