Hello ill try to explain better:

Lets say i want to see where the orange bar ends:

(https://ibb.co/NLnPLDD)

So i need to scroll to the right, but i have many task so i have to go down all the way to find the horizontal scroll bar

(https://ibb.co/g3N8vD9)

scroll to the right

(https://ibb.co/DKN3TC5)

and go up again to see if i see the end of the orange bar (in this case i dont so ill have to do it again)

(https://ibb.co/HhZ4JJc)

• This reply was modified 1 year, 11 months ago by Guillermo Rubio.
• This reply was modified 1 year, 11 months ago by Guillermo Rubio.

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

• This reply was modified 1 year, 11 months ago by Guillermo Rubio.