Width of edit-text widget

#1

Hello.

I am playing around with the edit widget and have found that the width of the widget when tagged with “textarea” is narrow compared to the width of the tiddler.

Capture
Capture2465×1375 125 KB

The code used is very simple:

<$edit-text field=summary tag=“textarea”/>

Is there a way to make the width of the widget dynamically fit the width of the tiddler?

Cheers

R

#2

Hi, here’s an example:

<style>
.wide100 {width:100%;}
</style>
<$edit-text class="wide100" tiddler="AppSettings" field="myconfig" tag="textarea"/>
#3

Thanks, Charlie. Very helpful.

#4

I’m a big fan of proximity. So nice to have the CSS “right there” where it is being used.

But that is a pain when the styling is desired in a whole bunch of places.

For anybody not familiar with it, do lookup https://tiddlywiki.com/#Using%20Stylesheets

Screenshot 2023-06-25 12.27.18 PM
Screenshot 2023-06-25 12.27.18 PM803×781 40.5 KB

1 Like
#5

That advice is very useful. Thank you @Charlie_Veniot

One thing that I have not been able to do is to control the height of the widget box so that it fits the text without showing a lot of white space.

Capture2
Capture21782×755 70.4 KB

Cheers
R

1 Like
#6

Use the minHeight attribute for the edit-text widget.

Here’s some sample code:

<style>
.wide100 {width:100%;}
</style>
<$edit-text class="wide100"
            tiddler="AppSettings" 
            field="myconfig"
            tag="textarea"
            minHeight="10px"/>
1 Like
#7

Great thanks. I tried this previously but don’t think I set the min height as small as 10px.

Cheers

R

1 Like
#8

There is a TW utility class, that is designed to be used for exactly that case:

<$edit-text tiddler=asdf class="tc-max-width"/>

If the edit-widget is in a table cell similar to the ControlPanel tables. tc-edit-max-width also adds 3px of padding.

Also see: Tables in WikiText CSS Utility Classes

3 Likes
#9

I can’t believe I hadn’t heard of these utility classes after all of these years. So many of my own table no-borders written… thanks for pointing that out!

1 Like
#10

Nice that you like it. — They are not that old. So your ears are OK :wink:

They have been implemented for TW v5.2.4, based on a request from twMat for the GettingStarted tiddler in 2015.

From time to time I’m “wading” through “early issues” to see, if they are still valid. Some of them can be closed, because we implemented the functionality. Some are still valid and if I like them, I pick them up.

It took quite some experimenting, till we got to a state, that all of us where OK with. I did try to create generic class names that work for many usecases. For most of them it was possible.

5 Likes