Stretchable textbox - fit to text (jQuery OR CSS) :-))

for those, who want to make textboxes flexible in hype,
in order to place as much text as you want to place without using scrolling,
you can do this - EDIT: use jQuery - load latest jQuery-plugin to the resource-folder

$(".textbox").each(function () {
    this.style.height = (this.scrollHeight+10)+'px';
});

textboxFitToText.hype.zip (102,0 KB)

1 Like

can you specify that this is jQuery @strmiska :slight_smile: just for the copy and pasters out there :wink:

1 Like

but isn´t it selfexplaining, if the user opens the document? :flushed:
edit above

you’d be surprised! :slight_smile:

1 Like

why @all work with js¿

sorry, don´t understand the question - why we do work? or should we work without?

exactly :slight_smile:

no, what you wish to do is default behaviour as you work with innerHTML already …
just set the hypeelement to overflow visible without any backgroundcolor and set the styling for you inner html … jquery-js-approach seems a bit to much for me :slight_smile:

but this is what i didn´t want. i get text from a database. so i only have to name the class or id for the textbox.
when i get data- text, there´s no need defining text - innerHTML, just write the class or id-name in hype. that´s all …

sry for intervention … it works for you, that 's the important matter …

1 Like

never mind - of cource, there are always many possibilities :slight_smile:

please rename “Stretchable textbox - fit to text (jQuery!)” to “Stretchable textbox - fit to text (CSS!)

I have a good solution, in my opinion the best solution for the responsive text, no more (boring) clones :slight_smile:

My CSS force only horizontal padding and the global width, with coverage of the background.

the vertical padding is fixed ( in Hype)

you can resize the symbol (no need to open it) just fit :zap:

PREVIEW

responsive_text.hypetemplate.zip (569.1 KB)

3 Likes

cool - the only thing i´ve to change:
in innerHTML there should text from a databse being loaded.
therefore i put the css-tag into the head-HTML of the document.

thank you!

did you change the title!
I was joking! anyway thanks :slight_smile:

yes, you can use the same style for the widget.
BTW: avoid padding in the html content. The total length must be 100%

1 Like

If you use this.style.height = "auto";

wouldn’t that work?? :slight_smile: