[Haykel]

Hi,

this is the discussion thread for the tokeninput extension.

[Haykel]

The current discussion on the extension's comments, when this thread was created, is about the possibility of using different values for 'tokenValue' and 'propertyToSearch' ('id' and 'name') when pre-populating the widget.

The latest suggestions are:

1. Use a serialized array for the attribute's value (scoob.junior).
2. Use an array to map 'tokenValue' to 'propertyToSearch'. I had my concerns about performance for big arrays, but zmilan pointed out correctly that arrays need only contain elements for the values assigned to the attribute.

I prefer not to use serialized array for the simple reason that the data submitted by the widget is a string of values separated by 'tokenDelimiter' and as such the value should have the same format and not force the developer to do any conversions of the submitted data. If the developer requires another format, he will have to make the conversions, but in a consistent way, for both setting and reading the value.

Any thoughts, suggestions?

[Haykel]

Question posted by finzaiko as a comment on the extension's page:

Quote

Change width
I like this extention what I looking for, Thanks to contribute but Im still confuse how to change textfield width ?

It is currently not possible and it will be added in the next version, but it is easy to implement:

• Add a public property htmlOptions to the TokenInput class
  
• In the function run(), pass the property as a third argument to the CHtml::activeTextField function call

Now you can pass an htmlOptions attribute to the widget as you would do with a normal active text field.

[Finzaiko]

I followed your instructions but it still does not work, maybe you can correct me
in TokenInput.php i add this line
public $ htmlOptions;
and run ();
CHtml :: activeTextField echo ($ this-> model, $ this-> attributes, $ this-> htmlOptions);
view:

        .......
        'theme' => 'facebook',
                 'htmlOptions' => array ('style' => 'width: 10px;'),
             ),
         ));
        ........

I'd try to change facebook style https://github.com/l...input/issues/98 its not work too.

[Haykel]

I think I have responded too quickly!! Sorry. Actually the active text field is not displayed at all, the plugin creates its own HTML structure and populates the hidden text input element, so the settings in htmlOptions are not visible.

The correct answer is that the field width is defined through CSS. The easiest way to change it would be to copy one of the provided CSS files, make the required changes and pass its URL to the cssFile option of the widget.

Please take care of the fact that the plugin uses the theme option as a suffix to all CSS class names, so if you use 'token-input.css' as a base, the theme option must be empty (do not define it), but if you use 'token-input-facebook.css', then set theme to 'facebook'. You could also create your own theme by using its name as the suffix to the CSS class names.

[Finzaiko]

Thanks Haykel for your quick response, I try create own theme more explore CSS although I am a little confused

[shehzad ali]

01. change width value of this ul.token-input-list-facebook li input selector to whatever width you want in token-input-facebook.css file

02. comment out this line in jqueyr.tokeninput.js file (line 441)
//input_box.width(input_resizer.width() + 30);

03. empty your /assets folder

04. now textbox size will not change and remain to whatever size you have set in step-01