Is it possible to set dynamic widths/heights based on the content (html?) of a layer. e.g.
a = new Layer html: "variable string length"
or is there a best practice to enable a layer to resize based on its content?
I'd also like to read that width back, but a.computedStyle()["width"] returns nothing, a.size returns the default 100x100 sizes and a.contentFrame() returns all 0's
Is there a way to get text height when there's more than one line of text (Utils.textSize returns the height of a single line)? The motivation is to render a multiline text-field where its width is limited (max width)
Eyal Zaidman Try `yourTextLayer._element.children.offsetHeight` ex: https://framer.cloud/PTlUK/
There are also other implementations in Kevyn's Material Kit (https://github.com/k-vyn/framer-material-kit), iOS Kit (https://github.com/k-vyn/framer-ios-kit) and Andreas's(https://github.com/awt2542/textLayer-for-Framer)
I would also recommend my Text module that call for you as well.
This is a pretty basic too to use to get a value returned.
Let me know if you need an example more than this...
myText = new Layer html: "A really really really long string of text that we want to use to measure the height."
myText.height = Text.intrinsicHeight myText
Hope that helps. There are also a few other nice text utilities in there as well.
Set the layer style to width: 'auto' and height: 'auto'. Also set the layers width to the HTMLDivElement's width by applying: Layer.width = Layer._element.clientWidth for the width and clientHeight for height. 100% foolproof.
Sam, how does that work for measuring it?
Jordan Robert Dobson You would either create a getter function for accessing the width of Layer elements with text or manipulate the Layer class to replace the Layer's width with the width of the primitive div element.
Ah so then you couldn't use native Framer directly. :(
Is it the right approach to set via the style attribute?a.style.width = "auto"
Hey Ed Lea - yes, there's a Utility we're working on that you can already use within Framer called Utils.textSize - which takes your content and style and dynamically updates the width and height of your layer for you. Here is an example of it in use: http://share.framerjs.com/91ntff7yoknh/
Benjamin Den Boer that is amazing! Exactly what I was looking for some weeks ago :D
thanks Benjamin I can see your example working, but when I tried it for myself, I couldn't get it to work properly http://share.framerjs.com/byxeepqtjk5u/ - am I missing something? p.s. this kind of thing is great, really helps with loading real data for prototyping :)
Hi Benjamin, do you know any reason why it might not work inside a loop? http://share.framerjs.com/byxeepqtjk5u/
Benjamin Den Boer i don't get it to work properly. I want to have dynamic heights based on multiline text. Should it work with your posted solution as well?
I just encountered this problem as well.
Yes. There's an undocumented Utils.textSize(layer.html, styles, constraints). It's a bit tricky to implement especially with multiline text where you have to account for height if it wraps. I've implemented it with Material Kit https://github.com/k-vyn/framer-material-kit & iOS Kit https://github.com/k-vyn/framer-ios-kit where you can just call a m.Text or ios.Text layer pass it some text, and the layer will resize. It also supports multiline through <br>'s. Andreas also has a really good module that does text layers. https://github.com/awt2542/textLayer-for-Framer.
Kevyn Arnott any possibility for ios kit to have autoheight for multiline text without using <br>. Here is what i get when I am using ios.text and long texts
I don't get why people don't just measure the offsetHeight or width after the layer is rendered.
That's what I do and is much safer than using the utils function.
Jordan Robert Dobson I am creating tons of layers using classes, how i can check offsetHeight without adding id to every layer created? sounds like overkill to me
So in your constructor write and call...
updateForTextHeight: -> @.height = @._element.children.offsetHeight
Or something like that. Out getting coffee at the moment.
Then you can also register an event listener for changes in HTML to call this function as well.
thanx will play with that
btw utils textsize calculates multiline wrong
its insane: but offset height also doesnt work for that in framer:)
I'll send you my code soon.
i am trying to sandbox code to showcase my pain :)
ok in sandbox it works fine, will try to find problem in my code then
found it:) question solved, thanx
Sergey did you get this working? I'd love to see the code. I've thought about ways to accomplish this before, but I never got anywhere.
Message me... Kevyn Arnott I have a module I'm building up for text related transformations.
managed to make it working with ioskit module and some additional functions, will hit u up Kevyn Arnott
Sergey Jordan Kevyn any chance you guys can upload an example project? thanks!
http://share.framerjs.com/umvdief7wxj4/ Dami Dina
Cheers Sergey adding this right after adding a new row works perfectly;row.height = row._element.children.offsetHeight
There should be an easier way to have the parent height automatically adapt based on the children in Framer