Size and Height of edit-text widget

#1

I have this in one of the edit templates:

Related: <$edit-text field="related" size=150 minHeight=50px />

It does not seem to obey ‘minHeight’ instruction. No matter what I put there, the box remains the same height.

Also, can I not specify size as %? In this case I want the box to occupy the full width.

Tabs overwriting edit-text CSS
#2

  • minHeight only applies when the field is text or tag="textarea" has been specified (i.e., a multi-line edit field)

  • size is the width (in characters) when the field is not text or tag="input" has been specified (i.e., a single-line edit field)

  • To specify the width using CSS units (e.g, “%”), you need to define a CSS classname and then use the class="classname" parameter, like this;

<style> .wideEdit { width:100%; } </style>
<$edit-text field="related" tag="textarea" class="wideEdit" />
  • Also, to use % to specify the minHeight of a textarea, it must be enclosed in a containing div that has a defined height, like this:
<div style="height:20vh;">
<style> .wideEdit { width:100%; } </style>
<$edit-text field="related" tag="textarea" class="wideEdit" minHeight=80% />
</div>

enjoy,
-e

2 Likes
#3

@EricShulman Perfect. Thanks.

#4

@EricShulman May be, this is not possible. But let me ask.

With this, as I edit the tiddler, this field shows as a nice area of about four newlines in height. If I remove ‘tag=textarea’, it shows as just one line.

It would be perfect if it expands to the four line height as I enter the field to enter the data. But as I go to the next field, it shows just one line, even if I continue to edit the tiddler as a whole.

Can this be done? How?

#5

It can be done using CSS… however, it will override the TWCore’s default autoHeight-"yes" handling.

<style>
   .myEdit { width:100%; height:1.5em !important; }
   .myEdit:focus { height:5em !important; }
</style>
<$edit-text field="related" tag="textarea" class="myEdit" tabindex=1 />

-e

2 Likes
#6

@EricShulman Thanks. Solved the problem. :slight_smile:

I had thought of using $details widget to hide details when not needed. But when folded, that won’t show any details.

This is so much better.