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.style.height = (this.scrollHeight+10)+'px';
});

textboxFitToText.hype.zip (102,0 KB)


Expanding textfield to flexible height
#2

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


#4

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

responsive_text.hypetemplate.zip (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%


#14

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

wouldn’t that work?? :slight_smile: