DevExpress / devextreme-reactive

Business React components for Bootstrap and Material-UI

Home Page:https://devexpress.github.io/devextreme-reactive/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scheduler not fitting parent container

tippfelher opened this issue · comments

Is there an existing issue for this?

  • I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

React Scheduler

Current Behaviour

According to the docs:

height number | auto auto The scheduler's height. If the value is auto, the height equals that of the container component.

But this doesn't work on any of your codesandboxes provided !?

How to make Scheduler fit the parent container?

Expected Behaviour

Scheduler has same height as red box in sandbox. (link below)

Steps to Reproduce

https://codesandbox.io/s/rough-water-vkdyql?file=/demo.js

Environment

  • devextreme-reactive: xxx
  • react: xxx
  • browser: xxx
  • bootstrap: none
  • react-bootstrap: none
  • material-ui: none

Hello @tippfelher,

If you inspect the scheduler element, you will see that height='auto' works correctly because the scheduler element has a height of 100%. However, if you wish to make the scheduler responsive to its parent container's height, you need to implement WeekView.TimeTableCell and WeekView.TimeScaleLayout and manually define each cell's height.

I created a sample to demonstrate this solution: CodeSandbox.

A similar solution was described in the following report: Responsive Scheduler MonthView Height #2706
.

Let me know if you have additional questions.

Thank you for using Devextreme Reactive. We use GitHub issues to track bug and feature requests. We process incoming issues as soon as possible. Issues that have been inactive for 30 days are closed. If you have an active DevExtreme license, you can contact us in our Support Center for updates. Otherwise, post your question on StackOverflow.