How to define a fixed size view for FieldTextInput object

[Kishan kedia]

Hi All,

How can we fix the size of the number of characters that can be seen in a FieldTextInput object view box

In fig 1 we can see that the FieldTextInput object has been reduced to just one character space size as no text has been written. however, in fig 2  FieldTextInput object changes its width to fit the 'default' text inside it. Default number of characters that are displayed is 50. 

Fig 3 is something that i am trying to achieve i.e a fixed size FieldTextInput object that will display 15 characters space even when the text inside it is empty or less than 15 characters or more (no resize happens when we remove or add characters)

For making the number of characters to display to 15, i have modified the maxDisplayLength property value in FieldTextInput ( https://developers.google.com/blockly/reference/js/Blockly.FieldTextInput#maxDisplayLength )

                  fig 1                fig 2               fig 3
Regards,Kishan

[Abby Schmiedt]

Hi Kishan, 

The ability to add a minimum display length is not currently supported. 

There are two options for your problem: 

1. You can pad the input text with white space using a validator on the field. See here and here. Not the most elegant but wouldn’t require you to change core blockly. 

2. You can create a new field type that would have your minimum length for the field. It would have to override updateWidth() and can be added using Blockly.Field.register()

[Matthew Bishop]

I recently had to do something similar--create a minimum width for text fields. My solution was to implement an existing hook in Field that Blockly looks to for text display changes. In my case, I only wanted to max-width the FieldTextInput class.

Blockly.FieldTextInput.prototype.getText_ = function() {
  return this.getValue().padEnd(4)
}

[Agrawal]

Hi kishan, did you get any solution for this? I am also searching for the same for my custom field based on the FieldTextInput.

[C Ben]

Hi all,

Yes for me too, it could be great to have this feature to keep aligned all TextFields in complex Blocks. For instance I have a "Table Block" and it's impossible to keep cells aligned in their column (see picture attached).

Chris

[Beka Westberg]

Hello,

Both of the solutions that Abby posted above are still the recommended solutions :D In combination with the maxDisplayLength they should allow you to give you fields a constant size.

Best wishes,

Beka

[C Ben]

Hello,

I've tried to implement, but I'm a beginner in goog. imports.

I've implemented an ES6 projet, and for the time being, I've used only import ES6 syntax to use create my block declaration , mutators etc...

import * as Blockly from "blockly/core";

I've experimented a bit mixing "require" and ES6 "import", it's quite tough.

Despite that, I try to extend an existing field ( https://developers.google.com/blockly/guides/create-custom-blocks/fields/customizing-fields/extending ) but simple lines like :

goog.provide('MySubclassName');

goog.require('MySuperclassName');

gives me a "error  'goog' is not defined"

I thought that installing google-closure-library ( npm uninstall -save google-closure-library ), is enough but it seems not.

Any help would be appraciated

Chris

[feni...@google.com]

Hi Chris,

Take a look at the slider field plugin code to see how to extend an existing field.

If you're importing * as Blockly from "blockly/core" you should have all of the fields, so you don't need to require them again. You can export instead of using goog.provide. Just make sure you register your field. 

Cheers,

Rachel