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

What is Framer? Join the Community
Return to index
Ed Lea
Posted Jan 30 - Read on Facebook

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?

Edit:

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

35 Comments

Eyal Zaidman

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)

Paul Justin Farino

Eyal Zaidman Try `yourTextLayer._element.children[0].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)

Jordan Robert Dobson

I would also recommend my Text module that call for you as well.

https://github.com/Seattle-Framer/modules-Seattle/blob/master/Text.coffee

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.

Sam Olaogun

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.

Jordan Robert Dobson

Sam, how does that work for measuring it?

Sam Olaogun

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.

Jordan Robert Dobson

Ah so then you couldn't use native Framer directly. :(

Ed Lea

Is it the right approach to set via the style attribute?
a.style.width = "auto"

Benjamin Den Boer

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/

Adria Jimenez

Benjamin Den Boer that is amazing! Exactly what I was looking for some weeks ago :D

Ed Lea

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 :)

Ed Lea

Hi Benjamin, do you know any reason why it might not work inside a loop? http://share.framerjs.com/byxeepqtjk5u/

Jon Arnold

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?

Paul Carduner

I just encountered this problem as well.

Kevyn Arnott

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.

Sergey Voronov

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

Jordan Robert Dobson

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.

Sergey Voronov

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

Jordan Robert Dobson

So in your constructor write and call...

@updateForTextHeight()

Jordan Robert Dobson

updateForTextHeight: ->
@.height = @._element.children[0].offsetHeight

Jordan Robert Dobson

Or something like that. Out getting coffee at the moment.

Jordan Robert Dobson

Then you can also register an event listener for changes in HTML to call this function as well.

Sergey Voronov

thanx will play with that

Sergey Voronov

btw utils textsize calculates multiline wrong

Sergey Voronov

its insane: but offset height also doesnt work for that in framer:)

Jordan Robert Dobson

I'll send you my code soon.

Sergey Voronov

i am trying to sandbox code to showcase my pain :)

Sergey Voronov

ok in sandbox it works fine, will try to find problem in my code then

Sergey Voronov

found it:) question solved, thanx

Kevyn Arnott

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.

Jordan Robert Dobson

Message me... Kevyn Arnott I have a module I'm building up for text related transformations.

Sergey Voronov

managed to make it working with ioskit module and some additional functions, will hit u up Kevyn Arnott

Dami Dina

Sergey Jordan Kevyn any chance you guys can upload an example project? thanks!

Sergey Voronov
Blake Manzo

Cheers Sergey adding this right after adding a new row works perfectly;
row.height = row._element.children[0].offsetHeight

There should be an easier way to have the parent height automatically adapt based on the children in Framer

Read the entire post on Facebook