force set width on multi-line edit-text widget

[Dave]

Hi,

I have this macro which creates a multi-line edit text widget:

\define bignotes(side)
<$edit-text tiddler="notesInFields" field="$(currentTiddler)$.$side$" class="tw-edit-texteditor"  tag="textarea">
\end
<<bignotes>>

the width and height can be changed manually by a little drag bar that appears in the lower right hand corner,
however, I'd like to force the width (especially) and (for extra points) height to specific values when the tiddler first opens.


Is this currently possible?

There was a thread that talked about this a while back, but it just fizzled out last September:
https://groups.google.com/forum/#!searchin/tiddlywiki/edit$20tiddler|sort:date/tiddlywiki/zanptp93o7w/SN9W19cvAgAJ

[Eric Shulman]

On Sunday, March 19, 2017 at 5:45:37 PM UTC-7, Dave wrote:

\define bignotes(side)
<$edit-text tiddler="notesInFields" field="$(currentTiddler)$.$side$" class="tw-edit-texteditor"  tag="textarea">
\end
<<bignotes>>

the width and height can be changed manually by a little drag bar that appears in the lower right hand corner,
however, I'd like to force the width (especially) and (for extra points) height to specific values when the tiddler first opens.

define a CSS class

.myTextEdit { width:50em; height:10em; }

then, add it to the <$edit-text> widget call:

<$edit-text tiddler="notesInFields" field="$(currentTiddler)$.$side$" class="tw-edit-texteditor myTextEdit"  tag="textarea">

enjoy,

-e

[Dave]

Thanks again Eric, but I put the CSS class thing in a tiddler and tagged it

$:/tags/Stylesheet

and it didn't change the size of it.  I also tried removing the spaces in it but that didn't do anything.

When I remove tw-edit-texteditor it doesn't change either, but when I remove tag="textarea" it goes to a single line edit field.

Is there maybe something about that tag="textarea" that overpowers the stylesheet thing?  

My TW version is  5.1.13 if that matters...

[Eric Shulman]

On Sunday, March 19, 2017 at 9:25:30 PM UTC-7, Dave wrote:

Thanks again Eric, but I put the CSS class thing in a tiddler and tagged it

$:/tags/Stylesheet

and it didn't change the size of it.  I also tried removing the spaces in it but that didn't do anything.

When I remove tw-edit-texteditor it doesn't change either, but when I remove tag="textarea" it goes to a single line edit field.

Works on tiddlywiki.com (5.1.13):

1) create a tiddler, tagged with $:/tags/Stylesheet, containing:

.myTextEdit { width:50em; height:10em; }

2) In the <$edit-text> widget, add the "myTextEdit" classname to the existing class (with a space between them):

<$edit-text ... class="tw-edit-texteditor myTextEdit" ...>

Perhaps you missed something the first time around?

-e

[Dave]

That doesn't seem to work for me, e.g. if I change it to 40em x 40em its still a long rectangle (horizontal).

Is it maybe browser dependent?  I mainly use firefox.

[Dave]

Is it maybe browser dependent?  I mainly use firefox.

Nope, same thing on Chrome :'( 

[Eric Shulman]

On Monday, March 20, 2017 at 10:55:14 AM UTC-7, Dave wrote:

Is it maybe browser dependent?  I mainly use firefox.

Nope, same thing on Chrome :'( 

hmm.... it turns out that the TWCore is setting the height of the textarea element explicitly (i.e., not through a CSS rule, but rather by directly setting the property on the element.  This is based on the EditorToolbar's "editor-height" selection (auto size to fit content vs fixed height)

$:/core/ui/EditorToolbar/editor-height-dropdown

To override this value for your custom input field (but NOT for all textarea elements), you can add "!important" to the height property in your CSS:

.myTextEdit { width:50em; height:10em !important; }

That should do it.

enjoy,

-e

[Thomas Elmiger]

Hi Dave and Eric

There is a minHeight attribute according to http://tiddlywiki.com/#EditTextWidget

Did you try this minHeight?

It worked for me like this:

<$edit-text tiddler="$:/plugins/telmiger/Clipboard/cb" placeholder="Clipboard" default="This is your clipboard." rows="2" minHeight="2em" class="te-cb-edittext"/>

Maybe you will have to specify an adequate number of rows (lines) too. See https://www.w3schools.com/tags/att_textarea_rows.asp

Good luck!
Thomas

[Dave]

Yes! that's it (both)

Actually this is a bonus value:  Eric's gives a situation where the height is strictly enforced (i.e. the resize handle doesn't even work) - sometimes you want that,

and Thomas's version gives a specified initial state, but you can resize if you want.

Thank you Eric and Thomas!

[Mat]

I have previously brought this to attention here; https://github.com/Jermolene/TiddlyWiki5/issues/2367

<:-)

[Egbert]

Putting this

.myTextEdit { width:50em; height:10em !important; }

in a tiddler tagged $:/tags/Stylesheet

 

And putting this in a different tiddler

\define bignotes(side)
<$edit-text tiddler="notesInFields" field="$(currentTiddler)$.$side$" class="tw-edit-texteditor myTextEdit"  tag="textarea">
\end
<<bignotes>>

 

gives me a textbox I can write contents to. However, when I save the TiddlyWiki file, close it  and open it again, everything what I’ve written is gone. What am I doing wrong?

[Dave]

Good catch! That happens to my version too.

When you go look at where the notes are kept ([[notesInFields]]), the notes are still there, but I'm note sure why they don't appear in the tiddler that has the note box.

[Dave]

I bet the solution is to set a default content which would have to be a variable set from the field that you'll be assigning it to.

If I figure that out I'll post it here, but currently I'm not sure how to exactly.

[Egbert]

Tks Dave. Can't wait for the solution, would really help.

[Thomas Elmiger]

Hi guys

This would work under certain conditions:

\define bignotes(side)
<$edit-text tiddler="notesInFields" field="$(currentTiddler)$.$side$" class="tw-edit-texteditor myTextEdit" tag="textarea">
\end

<<bignotes test>>

There are restrictions concerning the naming of fields, so maybe it is not a good idea to use tiddler names as a parameter where almost no restrictions apply.

This works for example in a tiddler with title "editor" but NOT for "Editor" (no uppercase letters allowed in field names).

So I would advise to define an adapted storage strategy. You could use temp tiddlers’ text field and give them titles like $:/temp/notes/tiddlerTitle-left

Good luck!
Thomas

[Dave]

Oh, yeah, I forgot about the upper case thing and fields

Is there a way to (easily) convert a string to lowercase only so this would work still using tiddlernames?

[Thomas Elmiger]

Please consider *all* restrictions and choose a good way, not a quick one!

http://tiddlywiki.com/#TiddlerFields

Happy developping,
Thomas

Hints: spaces, long dashes –, …

[Egbert]

Hi Thomas, thanks for the info, but as a relative newbie I am a bit lost. If I put it into context, does that mean the following?:

Putting this

.myTextEdit { width:50em; height:10em !important; }

in a tiddler tagged $:/tags/Stylesheet

 

And putting this in a different tiddler named $:/temp/notes/tiddlerTitle-left (which before was a 'normal' tiddler with upper cases in the title). What happens with the notesInField tiddler?

\define bignotes(side)
<$edit-text tiddler="notesInFields" field="$(currentTiddler)$.$side$" class="tw-edit-texteditor myTextEdit"  tag="textarea">
\end
<<bignotes>>

Sorry for the questions but as an ordinary user I'm still on a steep learning curve. I think what I am after is just an amended version of my macro that works. Anyway you're all doing a terrific job on this magnificent piece of software; so much appreciated!

Good luck!
Thomas

[Thomas Elmiger]

Hi Egbert

I know it's a steep learning curve ;–)

And text-edit obviously is one of the tricky parts – but I am a bit tired now, midnight is near.

Maybe in the meantime you could explain your personal usecase. What exactly do you want to achieve? (Possibly not the same as Dave.)

Do you know the basics TW5 builds on – aka HTML and CSS? That would make it a bit easier …

Good night!
Thomas

[Egbert]

Hi Thomas,

ah yes. What I try to do is to put a text box in a tiddler, which has a normal title with upper case (which I would not like to change). I would then like to write something into this textbox which should stay there, even after saving, closing and re-opening the TiddlyWiki file. I found the fixed text box from Eric, but would not mind to deal with the box with the resize handle (although I found that the resized box goes back to the original form, once you save, close and re-open the file). A solution for an automatic adjustment of the box, once you write towards it, as mentioned by Jeremy, I could not find anywhere in google groups.

I would not mind to use either of the three solutions, to be honest.

Thanks for any help.

[Thomas Elmiger]

Hi Egbert

See, that is much easier than what Dave wanted :)

Create a tiddler, name it as you like, and put this in:

<$edit-text tiddler="MyExtendedMemoryNotes" placeholder="Your text goes here" default="The tiddler MyExtendedMemoryNotes will be created automagically." rows="10" minHeight="10em" class="my-extended-memory-field"/>

Find your notes here: MyExtendedMemoryNotes

<style>
.my-extended-memory-field {
   width: 100%;
}
</style>

Adapt the parameters minHeight and rows as you like, keeping them in sync works good for me.

I hope, this is what you wished for.

All the best!
Thomas

[Egbert]

Hi Thomas, thanks for your help. Yes it works with one tiddler, but if I put a text in the textbox of tiddler 1 and also put some other text in the textbox of tiddler 2, the text of tiddler 1 get replaced with the most recent text of tiddler 2. Is there a possibility to put different texts to textboxes on different tiddlers? Sorry, I should have been more precise with my question.

[Thomas Elmiger]

Hi Egbert
You will have to be even more precise
;–)

How many such tiddlers do you want?

Why do you want that? (If I want to change a tiddler’s text I hit the edit button.)

Cheers, Thomas

[Egbert]

Hello Thomas, it's for job search and the title of the tiddlers are the job titles. The text box then serves as a quick notice taking tool to quickly add info which I might gather through a phone call, interview etc. The body of the tiddlers consist of the job descriptions, contact details etc.

[Thomas Elmiger]

Hi Egbert

Here comes my suggestion for your task: A conditional view template as I have learned it from Tobias Beer. This way we make something that shows up on any tiddler meeting predefined conditions. The condition I use is that a tiddler must be tagged with a tag ExampleTag so that the notes are shown. Of course you can change this to something more meanigful in your case like "joboffer".

Ingredients for this receipe: a tag, some wikitext code, a list-after field.

a) Your template tiddler must be tagged with $:/tags/ViewTemplate

b) In the text field we put this:

<$list filter="[all[current]tag[ExampleTag]]">
<$set name="tid" value="Notes-for-$(currentTiddler)$">
<$edit-text tiddler=<<tid>> placeholder="Your text goes here" default="The tiddler for storage will be created automagically." rows="10" minHeight="10em" class="my-extended-memory-field"/>
Notes go here: <$link to=<<tid>>><<tid>></$link>
</$set>

<style>
.my-extended-memory-field {
   width: 100%;
}
</style>

</$list>

c) create a field for your tiddler, call it list-after and enter this as value: $:/core/ui/ViewTemplate/tags

After you have created this tiddler you can tag any tiddler you like with "ExampleTag" and it will show a field for notes after saving.

New elements in this solution:
* the <$list filter part shows it’s content only if the condition with the tag is met.
* the <$set statement creates a variable tid that contains the title for the storage tiddler. You can change the prefix Notes-for- if you like.
* UPDATE: the list-after field defines, where our notes appear in the view template: right after the tags.

Good luck!
Thomas

((Updtate 2: Removed attachment, that was an old version))

[Egbert]

Thanks Thomas for all your efforts, it works now ;-)

[Justin Hurd]

Hi Thomas, I know this is a fairly old post, but is there a way to have this with a scrollbar instead of it constantly expanding downward?

[Justin Hurd]

Nevermind, I tinkered with some css, and found a solution that works for me!

!!!Notes:

<$edit-text tiddler="Notepad" placeholder="Type Notes Here."  rows="10"  minHeight="10em" class="my-extended-memory-field"/>

<style>

.my-extended-memory-field 

{width: 95%;

overflow-y: scroll;

max-height: 200px;

min-height: 250px;

position: static;

top: 100px;

}

</style>

[TonyM]

Justin,

Thanks for Sharing back.

Tony