Textfield Tags do not scroll when full on Flutter Web

[eyoeldefare]

Textfield Tags do not scroll when full on Flutter Web

[eyoeldefare]

Thanks for letting me know, I will see to it soon.

[eyoeldefare]

Its working for me right now both on the web (chrome) and both mobile platforms. Anyone else experiencing this, please share.

[jmsquillaro]

Thanks for taking a look into this. I have attached a photo of what I am experiencing (I just blurred out the content of the tags). As you can see, when full, there is no space to add more content as it does not slide over. Here is how the widget is being used:

Container(
        margin: const EdgeInsets.symmetric(vertical: 50.0, horizontal: 50.0),
        padding: const EdgeInsets.symmetric(vertical: 75.0, horizontal: 50.0),
        alignment: Alignment.center,
        width: 875.0,
        decoration: BoxDecoration(
          color: Colors.white60,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: FormBuilder(
          key: model.formKey,
          autovalidateMode: AutovalidateMode.disabled,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ...
              Text('AUTHORIZED ACCESS EMAILS',
                  style: Theme.of(context)
                      .textTheme
                      .headline5
                      .copyWith(fontWeight: FontWeight.w500)),
              const SizedBox(height: 15.0),
              TextFieldTags(
                  initialTags: model.initialAuthorizedAccessEmailsList,
                  tagsStyler: TagsStyler(
                      tagTextStyle: TextStyle(
                          fontWeight: FontWeight.normal, color: Colors.white),
                      tagDecoration: BoxDecoration(
                        color: kPennRed,
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      tagCancelIcon:
                          Icon(Icons.cancel, size: 18.0, color: Colors.white),
                      tagCancelIconPadding: EdgeInsets.only(left: 5.0),
                      tagPadding: const EdgeInsets.all(6.0)),
                  textFieldStyler: TextFieldStyler(
                      textFieldFilled: true,
                      textFieldFilledColor: Colors.white,
                      textFieldFocusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: kPennBlue, width: 3.0),
                      ),
                      textFieldEnabledBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.grey[400], width: 1.5),
                      ),
                      helperText:
                          'Enter the full and valid email addresses which will have full access to this organizer\'s account.'),
                  onTag: (tag) => model.addEmail(tag),
                  onDelete: (tag) => model.deleteEmail(tag)),
              const SizedBox(height: 50.0),
              ...
            ],
          ),
        ),
      ),

Again, this is only being seen on web and changing the window size does not affect it as the TextFieldTags is within a width constrained Container. Again, thank you for looking into this!

[eyoeldefare]

Okay so I was able to reproduce your issue.
Remember that the width of the gap between the tags and the TextField border to the right is being calculated based on the width of your device and altering the width of its container will affect the width of the TextFieldTags in relation to the width of the device. I hope that makes sense.

So basically, right now, you have 2 choices.

1. Remove width: 875.0 from your container
2. Change the the property of tagsDistanceFromBorderEnd to something like tagsDistanceFromBorderEnd: 0.45 inside TextFieldTags because to artificially mimic the width of the device in relation to the width of the TextFieldTags widget.