This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Joshua Tucker
Posted Feb 15 - Read on Facebook

Anyone worked with adding DOM elements to Framer layers and styling with CSS? I am trying to consolidate code by doing this:

layerElement.document.createElement("input")
layerElement.style = {
"height": "#{layerElement.height}px"
"width": "#{layerElement.width}px"
...
}

However, this won't take. It will take however like this:

layerElement.document.createElement("input")
layerElement.style["height" = "#{layerElement.height}px"
layerElement.style["width"] = "#{layerElement.height}px"
...

Thoughts? Thanks!

2 Comments

Koen Bok

For interactive elements you need to explicitly set the:

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

These are disabled by default in Framer for performance and a more native feel. I try to enable them "smart" here, but it doesn't catch all use cases:

https://github.com/koenbok/Framer/blob/master/framer/Config.coffee#L28

Joshua Tucker

Cool thanks Koen. I'll give it a shot.

Read the entire post on Facebook