- This topic has 6 replies, 2 voices, and was last updated 1 year, 7 months ago by
.
-
Hi,
Could you please, explain further the problem as I did not understand it.
The horizontal and the vertical scrollbars are independent, I do not understand why are you scrolling this way.
Are you using some auto-height?You can also send us a demo here or to support@jqwidgets.com
We are waiting for your reply!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/Hello ill try to explain better:
Lets say i want to see where the orange bar ends:
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
scroll to the right
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)
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
- You must be logged in to reply to this topic.