Request for a new feature: drag to resize fields in edit mode

#1

Hi everyone

The fields in the fields section of the edit template are rather small. What would be the chance that we could get a handle on the bottom right corner of each field in the fields section (as the text field has), to resize the field? This would help for those fields with lots of text, for example, if you have a lot of tiddlers listed in the list field. It doesn’t seem like that feature would add visual clutter, and it would be totally understandable to new users.

1 Like
#2

The issue at source is, once rendered to HTML, the fields “block” contains HTML <input> elements which are single line inline elements. The text field on the other hand is an HTML <textarea> element – which is multiline.

You could hack the edit template and make them all textareas… but I imagine that could get out of hand rather quickly if your tiddlers have lots of fields.

1 Like
#3

Thanks CodaCoder, great idea! I hacked it and it works great.

1 Like
#4

Discussion on this that might be of interest

1 Like
#5

Folks,

I have intentionally made some additional fields text areas before. If you want to retain the newlines you need to ensure you edit them through a text area, editing them as an input will destroy the line breaks.

I attach a draft solution I think many may fine useful. It provides a “local view template”. That is this view template is only for the current tiddler. This is good for experimenting on writing view Template tiddlers, but it is a multiline field with its own text area editor in edit mode so it allows you see what that approach looks like, and how I did it.
local-viewtemplate.json (5.0 KB)

However looking at the Original post of @DaveGifford I ask do you want the fields to operate as normal, only you do not need to scroll to see the whole field (if it value is long) but you can increase the display area with it wrapping over multiple lines?

Some thoughts;

  • Of course I expect with the new freedom in fieldnames even the fieldname may be longer as well now.
  • Remember there is now two ways to edit and view fields , one using tiddlers tagged $:/tags/EditTemplate to appear in the edit template.
    Currently the fields use $:/core/ui/EditTemplate/fields to add and edit fields. But any field with a matching tiddler $:/config/EditTemplateFields/Visibility/tiddlername containing “hide” will not be displayed using the standard field edit, instead you can use another tiddler tagged $:/tags/EditTemplate to edit such fields (eg with text area and keep line breaks.
  • The fact is in many cases if a field is a text area, rather than a single line field most filters work differently, eg you many need to use {{{ [{Simple tiddler list}splitregexp[\n]] }}}, they use the line break to split the items into separate titles.

What I am trying to say is the mechaisium is there to hack/handle this already however if you do you textarea rather than input there is a little more to it. So it seems to me you should make an effort when you want a multiline field, but leave the default to input.

Not withstanding this simply allowing an expanded view of long “input” fields would be nice, but the solution is not necessarily making them text area fields.

#6

Hi Tones

In response:

  1. I got what I personally needed from CodaCoder. I just needed the fields to be textareas.
  2. I tried your json on empty.html and didn’t see anytthing in ViewTemplate or Edittemplate.
  3. The only element missing for me is that it would be nice to pre-set the width of the fields so I didn’t have to resize them. But there is no width attribute, in contrast to three ways to set the height (rows, max height and autoheight). 3 high and 95% of the table cell that the field is found in would be enough.
#7

The ideal solution for that, I believe, would be for the core to support CSS “flex” and us being able to adjust those styles through stylesheets/style attributes. I seem to recall adopting flex has been suggested (@jeremyruston?) though I don’t think it’s on the near term horizon since it would be a quite significant and lengthy rewrite.

That said, there’s nothing stopping someone producing “flexed” versions of core templates, either as a bundle or plugin – “It’s only time and effort” (which I sadly don’t have).

Right now, doing the least intrusive hack you can (i.e. what you have already) is probably the way to go, especially if all you really want is to rid yourself of a little annoyance where the change improves your daily usability.

#8

Sorry, I meant to drop these in my previous…

.tc-edit-fields td.tc-edit-field-value input,
.tc-edit-fields td.tc-edit-field-value textarea {
 width: 95%;
}

The textarea only applies if you’ve made your changes to the template as suggested earlier.

1 Like
#9

Yes! Perfect. Thank you, CodaCoder!

#10

To use the local-viewtemplate create a field of that name and the local-viewtemplate editor will appear in edit mode. Any content in the local-viewtemplate will be applied only to the current tiddler in viewMode. Try it, I think it will go a long way to handling text area fields. For one it only treats a nominated filed as text area, thus it can be used to say to add additional text fields.

Please remember my warning that textarea fields are treated quite differently to input fields and many filters will behave differently, so I hope you are not treating all fields as text areas, or you are likely to experience unintended consequences with only a misplaced <enter> .