Set "max-height" with a slider

1

Hello,

I will adjust the max-height of .tc-scrollable-demo:

grafik

Code:

<span style="font-size: 0.85em;font-weight: 400;">
 Höhe Tiddler: </span> &nbsp;
<$range tiddler="displayheight" min="500" max="760" default="650" increment="10" class="slider"/> 
&nbsp;
<span style="font-size: 0.7em;" > {{displayheight}} px </span>

<style>

/* max Fensterhöhe */
.tc-scrollable-demo {max-height: {{!!displayheight}} !important; }
</style>

What I’m doing wrong?
When I check with F12 I see the default value is choosen…

grafik
grafik390×244 5.47 KB

Thanks in advance
Stefan

2

Your $range widget is saving the input in the text field of the tiddler named “displayheight”, but your CSS is referring to {{!!displayheight}}, which is the “displayheight” field of the current tiddler. Also, the CSS needs to specify the units (e.g., “px”). You can also omit “!important”, as it is not needed.

Try this:

.tc-scrollable-demo { max-height: {{displayheight}}px; }

-e

3

Thanks @EricShulman for feedack - but values still not overtaken:

grafik
grafik1824×757 110 KB

4

I notice that there is a strange erroneous “!important: ;” attribute defined for the .tc-scrollable-demo class, even though your <style>...</style> no longer has “!important” specified. This suggests to me that perhaps you might have another <style>...</style> being applied from somewhere else that is masking your most recent changes.

5

Removed the wrong “!important” - but still not ok:

grafik
grafik1808×755 132 KB

Also not with this code:
.tc-scrollable-demo { max-height: {{displayheight}}px !important; }

6

Without slider it works:

grafik
grafik1698×355 57.5 KB

7

You don’t need to use max-height when there is a div with overflow: auto;, it is enought the changing the value of property height.

This example works in tiddlywiki.com.

<span style="font-size: 0.85em;font-weight: 400;">
 Höhe Tiddler: </span> &nbsp;
<$range tiddler="displayheight" min="500" max="760" default="650" increment="10" class="slider"/> 
&nbsp;
<span style="font-size: 0.7em;" > {{displayheight}} px </span>

<style>
.tc-scrollable-demo {height: {{displayheight}}px; }
</style>

<div class="tc-scrollable-demo">
{{Community}}
</div>
8

It didn’t work at my wiki :frowning_face: - so I take this code

<style>
.tc-scrollable-demo {height: {{displayheight}}px; }
</style>

and tagged this code

.tc-scrollable-demo {height: {{displayheight}}px; }

as $:/tags/Stylesheet.

Than it works - for height and max-height !?

Thanks to @EricShulman and @Alvaro :+1:
Stefan