search

node-projects / web-component-designer

A Designer for HTML Components or Pages in a WebComponent
https://node-projects.github.io/web-component-designer-demo/index.html
MIT License
140 stars 16 forks source link

Designer scrollbar #310

Closed mcode92 closed 1 year ago

mcode92 commented 1 year ago

I want to change the Vertical scrollbar und make it By default in top, not in the middle of designer document. The Designer document should to be in the Top and there are no Place to scroll upper. How? Please See the Screenshots.

jogibear9988 commented 1 year ago

you need to implement your own version of "DesignerView", this handles the complete scrolling.

At the moment, also the designarea is as big as the element is, cause i find no good solution to make it bigger. But if you specify a size it gets as big as you want.

You could also add support for this to DesignView, and create a pull request. But if you do, do not change the default, cause we use it like this.

Also in this sample: https://node-projects.github.io/web-component-designer-simple-demo/index.html you see how to use only the designerview

mcode92 commented 1 year ago

Thank you for your replay. I have found that using onley the DesignerView is very cumbersome and requires many changes. I would like to increase the size of the design area, and I have tried changing the height in the style area (in the DEV in DesignerCanvas), which resulted in a larger area but also a very large scrollbar. Are there any other ways to change the size?

jogibear9988 commented 1 year ago

designer view/canvas have the property : designerWidth/designerHeight. see: https://github.com/node-projects/web-component-designer/blob/master/src/elements/widgets/designerView/designerView.ts#L300

mcode92 commented 1 year ago

I have modified the value of "h-Scrollbar" in "DesignerVier" across all methods, and set the height using "designerCanvas.offsetHeight". This approach has proven to be effective.