Hi there,

I am developing a reactive web app. If i use the DropdownTags widget, and select multiple items, the DropdownTags overflows on the page. Like this:

The widget has no editable style properties:

How would i be able to control the overflow? The DropdownTags is set within a container that restricts width, but that doesn't work. Tags should be listed within the widget and height adjusted accordingly.

Help is welcome. Using latest latest platform version.

Saludos,

Wilko

Hi Wilko,


You can change the style for the container containing the dropdown tags to use:

overflow: scroll;

in the css.


Regards,

Saugat

Saugat hi,

It works to a certain extend, but it doesn't look good:

The tags still overflow the DropdownTags box, and do not wrap inside the DropdownTags. I tried with a css class as an extended class on the DropdownTags widget, no result however.

Saludos,

Wilko

From the github page you can see examples where the wrapping is good:

https://joshuajohnson.co.uk/Choices/

That's what i want.

How can i get there?

Thanks,

Wilko

Hi Wilko,

Looks like some of your theme or screen css is overriding default style of dropdowntag widget. That is why tags are getting overflow.

I tried to regenerate your case and I am able to do that if I add below style on html generated with dropdowntag


So please check if similar style is present in your theme or screen css which is overriding default dropdown tag style.

Nikhil hi,

The widget tree is like this:

EpicBlock is in a container with a 400px width:

MaxWidth set the width of the page, the rest doesn't do anything with "width". display i am not touching anywhere. I'll check further.

Thanks,

Wilko

Hi hi,

If i move the block outside "Interaction\HorizontalScroll", the wrapping works. So "Interaction\HorizontalScroll" is probably to blame. Any ideas on how to have the "DropdownTags" inside a "Interaction\HorizontalScroll" with wrapping?

Saludos,

Wilko

Hi Wilko,

Enclose the DropDownTags in a container and give the container the style "white-space: normal;"

Regards,

Marcelo

I don't think Interaction\HorizontalScroll alone is the reason of this issue. I tried adding dropdowntags inside Interaction\HorizontalScroll and it worked without any issue. You can try to add dropdowntags inside Interaction\HorizontalScroll in a blank page, it will work.

It could be Interaction\HorizontalScroll with other component inside it in your structure. 

As you said that you have block width set to 400px so I think somewhere display block is also getting applied (could be default style of some other component which is parent to your dropdowntags).

Will be helpfull if you can share a minimal oml to check.

Marcelo, Nikhil hi,

For now i'll go with Marcelo's suggestion, that works for me. Thanks to both.

For Nikhil, keeping all else the same and only moving the webblocks outside the horizontal scroll creates wrapping in the tags dropdown. With both in place i need Marcelo's suggestion.

Thanks again,

Wilko