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: