Hi, i was using
.smart-gantt-chart {
height: fit-conten
}
but anyway i changed it and it solved more or less the problem, i also figured out how to do what i wanted (click and drag to the left/right the gantt) ill let u the code here in case u need it:
in useEffect:
const gantt = document.getElementsByClassName(‘smart-timeline-content’)[0]
if (gantt) {
gantt.addEventListener(‘mousedown’, (e) => {
document.body.style.cursor = ‘grabbing’
document.addEventListener(‘mousemove’, mouseMoveHandler)
document.addEventListener(‘mouseup’, mouseUpHandler)
}
}
functions definition:
const mouseMoveHandler = function (e: MouseEvent) {
if (!dateRef.current) {//dateRef is a useref that changes when the gantt event onResizeStart and comes back to null onResizeEnd, this way i prevent scrolling when resizing
if (xRef.current == null) xRef.current = e.pageX //xRef is a useRef to store last pageX
if (xRef.current != e.pageX) {
const scrollbar = document.querySelectorAll(
‘[smart-id=”horizontalScrollBar”]’
)[1]
const currentScroll = parseInt(scrollbar.getAttribute(‘value’)) || 0
const max = parseInt(scrollbar.getAttribute(‘max’))
let diff = (xRef.current – e.pageX) * (max / 700) //increase decrease 700 to make it slower/faster
if (diff > 0) diff = Math.ceil(diff)
else diff = Math.floor(diff)
if (diff != 0) {
const scroll =
currentScroll + diff < 0
? 0
: currentScroll + diff > max
? max
: currentScroll + diff
scrollbar.setAttribute(‘value’, scroll.toString())
scrollRef.current = scroll.toString()
}
xRef.current = e.pageX
}
}
}
const mouseUpHandler = function (e) {
document.body.style.cursor = ”
document.removeEventListener(‘mousemove’, mouseMoveHandler)
document.removeEventListener(‘mouseup’, mouseUpHandler)
xRef.current = null
}
I think it would be a nice add on the gantt
I have another problem now but ill put it in another ticket as i think is different
Thank u very much
