Hi Tasha,
Thanks for looking into this!
The FormControl, InputLabel, Select, and MenuItem components I'm using are from the @mui/material package. Here are the import lines for css's and mui:
import { Gantt as SvarGantt, Willow } from "wx-react-gantt";
import Screen from "../layouts/Screen";
import { useQueryClient } from 'react-query';
import { useContext, useState, useMemo, useRef } from "react";
import "wx-react-gantt/dist/gantt.css";
import "./Gantt.css";
import {
FormControl,
InputLabel,
Select,
MenuItem,
} from "@mui/material";
The CSS files used in the project are:
app.css
screen.css
gantt.css
gantt.css:
.wrapper {
width: 100%;
display: inline-block;
justify-content: center;
}
.wx-gantt .wx-bar.client {
display: none !important
}
.wx-gantt .wx-bar.dipendente {
display: none !important
}
.wx-gantt .wx-bar.wx-task.late {
background-color: red;
}
.wx-gantt .wx-bar.wx-task.late .wx-progress-percent {
background-color: rgb(137, 3, 3);
}
screen.css:
.screen {
width: 100% !important;
height: calc(100vh - 64px);
background: linear-gradient(to bottom, #3b82f6, #1e3a8a);
margin-top: 64px;
/* display: flex; */
align-items: start;
justify-content: center;
}
.screenOre {
height: 100%;
min-height: 100vh;
}
app.css:
#root {
width: 100% !important;
height: 100%;
margin: 0 auto !important;
text-align: center !important;
display: flex !important;
justify-content: center;
}
html,
body {
background-color: cornflowerblue;
}
.wrapper {
width: 100%;
display: flex;
justify-content: center;
}
Let me know if you need anything else to reproduce or debug the scrolling behavior.
Thanks!
Gurmilan
