Log in to AnswerLog in to Follow
2020-12-16 05-24-28
Jussi Ahonen
34Views
5Comments
Solved
How to fix width of the column including Dropdown tags Block
Question
UI
Reactive
OutSystems UI
OutSystems Widgets
Application Type
Reactive
Service Studio Version
11.14.5 (Build 57418)

Hi

  1. I have a table
  2. One column (Nav Companies for Industry in the image) of that table is a block
  3. That block contains Dropdown tags widget

The widget works fine but I'm not able to set the maximum width of that column. When I select multiple tags, the column just widens. 


 

I have tried at least to

  1. Set the header cell width
  2. Add CSS max-width
  3. Put container around the block and restrict its width
  4. Read through several forum posts concerning fixed width and tried them

None of them have worked. 

So how can I set the maximum width for that column? I checked the DropdownTagsDemo from the Forge and there the tags are aligned seemly based on the width of the container. 


0
0
08 Feb
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP
Solution

Hi Jussi,

I would suggest you try the below mentioned appraoch

  • Set the Header Row width

  • Define a ExtendedClass value to the DropdownTags property section as shown below

  • Define the CSS rule in the Stylesheet section

CSS Rule:

.custom-dd-style .choices__list--multiple {
    display: flex;
    flex-wrap: wrap;
}

See this sample screen: DDTagsInsideTable

I hope this helps you!


Kind regards,

Benjith Sam

0
0
08 Feb

Hi Benjith

Thanks for the answer. I followed your advice. I try to ensure that i made everything correctly since the result is the same than before, so the column is still as wide as there are tags selected

  • I set the header row width
  • I defined the the ExtendedClass value in DD widget
  • I opened the block's StyleSheet and added the code
    • I also tested to add that code to Screen's (that calls the block) Style sheet. Nevertheless, no effect

Your example column seems to work perfectly. Are you using block or is that Dropdown tag widget straight in the column?

Edit: I tested to call that block from another page and not inside a table. That contains only the block, nothing extra and the dividing to several rows works just fine

BR
Jussi

0
0
09 Feb
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

Replying to Jussi Ahonen's comment on 09 Feb 2022 06:05:06

Hi Jussi,

I have tried the mentioned approach for both scenarios, i.e. DDTags defined in Screen & DDTags defined in block referenced to the screen, and it's working as expected for me.

See this sample screen: DDTagsInsideTable

If it doesn't solve your problem, I guess some top-level CSS rules might be defined that is causing this issue?!

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_DDTags_InsideTableCol.oml

0
0
09 Feb

Replying to Benjith Sam's comment on 09 Feb 2022 06:48:48

Thank you again Benjith

I checked your .oml file and everything seemed to be the same. However now I got it working smoothly. I must have made some copy paste error. I don't get why it didn't work. But the main thing is that now it works. Thanks!

Jussi

0
0
09 Feb
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

Replying to Jussi Ahonen's comment on 09 Feb 2022 07:32:56

You're welcome, Jussi.

Glad to help you :)


Kind regards,

Benjith Sam

0
0
09 Feb
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.