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

(strmiska) #1

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.scrollHeight+10)+'px';
}); (102,0 KB)

Expanding textfield to flexible height

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

(strmiska) #3

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


you’d be surprised! :slight_smile:

(Hans-Gerd Claßen) #5

why @all work with js¿

(strmiska) #6

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

(Hans-Gerd Claßen) #7

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:

(strmiska) #8

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 …

(Hans-Gerd Claßen) #9

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

(strmiska) #10

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

Max-width in Hype Preview in Browser
(Freelancer) #11

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 (569.1 KB)

Best practice workflow for working with desktop and mobile
(strmiska) #12

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!

(Freelancer) #13

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%


If you use = "auto";

wouldn’t that work?? :slight_smile: