search

xzdarcy / react-timeline-editor

react-timeline-editor is a react component used to quickly build a timeline animation editor.
https://zdarcy.com/
MIT License
284 stars 82 forks source link

how can i add space between the timelinerow and also how to give name and display it in the timeline row #50

Open ggibin8 opened 3 months ago

ggibin8 commented 3 months ago

Screenshot 2024-04-16 1134277

DongLee0504 commented 2 months ago

image

.timeline-editor-action{ height: 28px !important; }

rochindev commented 2 weeks ago

.timeline-editor-action{ height: 28px !important; }

This works in a way that makes them thinner. Im wondering how you made it to get them to that width with all that space in between 🤔

rochindev commented 2 weeks ago

.timeline-editor-action{ height: 28px !important; }

This works in a way that makes them thinner. Im wondering how you made it to get them to that width with all that space in between 🤔

Got it now, for some reason playing around with the styles and re-rendering the DOM to see the changes would make them apply incorrectly (maybe its a ReactVirtualize issue?). So what worked for me was: <Timeline rowHeight = {X} /> and in the CSS: .timeline-editor-action{ height: (X-Y)px !important; }

X being the size of the row you want in pixels and Y being however smaller the amount you want the actions to be.

And at the end refreshing my browser to see the correct changes, not re-rendering the DOM.