Hello community.
I need to build a screen that displays lists of filter conditions selected by user.These lists consists of several categories(like "Product Type", "Manufactured By" etc.) and should be displayed on the same row.
They should be displayed like this:Product Type: "Type 1", "Type 2", "Type 3"　Manufactured By: "Company A", "Company B"
Each category has independent list that users can pick conditions from.
The problem is, each categories are displayed by list widgets and styled by containers, which width are static and does not stretch according to the numbers of elements.
So when number of selected elements are low, there'll be a gap like this:
Product Type: "Type 1", 　　　　　　　　　Manufactured By: "Company A", "Company B"
I need the container which has "Type 1" to shrink to offset those gap.
Is there any ways dynamically set Container's width?
Thanks in advance.
Hi @Shinichiro Endo
Apologies for the delay getting back to you. What's causing the issue is the script tag added by the List Widget.
To remove this, you can disabled the virtualization by adding this attribute on your List Widget:
Please note that virtualization is used to optimizes performance, so please use it carefully. You can read more here: https://success.outsystems.com/documentation/11/reference/outsystems_language/interfaces/designing_screens/list/
Please let me know if this solves your issue.
Regards,
Kharlo
Hey @Shinichiro Endo it will be helpful, if you can provide an oml, or a screen of the current structure you have in your Widget Tree. Nevertheless here's my suggestions:
Option 1: Remove container widths and let it flow by itself.
Option 2: Using display-flex. And remove elements that Fills the entire width like the Label.
NOTE:
Please check the result here:
If you'd ask me, I'll prefer Option 1, it's simpler and easy to maintain, just let it flow by itself. If your filters are inside different blocks, I'd choose Option 2 :)
I've attached the Demo oml as well. Please let me know if this solves your problem.
Hi, @Kharlo . Thanks a lot! This is exactly what I wanted, and Option 1 was suitable for my case.
However, I'm facing a bit of a problem now...
When number of records in list is few (less than 3) elements are wrapped below label, although there's enough space to display them in single row.
Once I append records and make it 3 or more, it gets back into single row and never get wrapped again even if I remove records to make it 2 records.
What is causing this behaviour, and is there any ways to avoid it?Thanks a lot in advance.
Could you please share an OML or a screenshot of thestructure of your widget tree please so I could understand better what's happening?
Have you removed the defined widths of the elements as I've shared on the NOTE above?
Yes, I believe I removed those widths as you explained, and it works fine once the list have more than 3 records.
Here's oml that I modified to reproduce the problem. Please take a look at it and let me know if you find anything wrong.
There's a input to set max records and a button to refresh aggregates.
Default max records is 2, so you'll see the wrapping problem occurring.Once you've set max records 3 or more, it will go back to normal wrapping behaviour, and stays that way even if you set max records to 2 or less again.
Hi, @Kharlo . Thank you so much for your answer. This solved the problem!Now the app is working in a way exactly I wanted.
Again, thank you so much for all of your help. You've made my days!
Also thanks to @Murali Manoharan V and @YASHPAL for responding first.Now I understand your answers are the ways to solve my question, as my initial question was rather inaccurate and a bit off from what I really wanted to achieve.
Best Regards,
Shinichiro Endo
Yeah you can
By using style class property's expression editor
you can write your custom style classes in CSS area.
I hope it will help you
Regards
Murali
Hi @Murali Manoharan V , Thanks for your reply.
Maybe I misunderstood it, but I don't think this is what I was asking.What I was asking is how to dynamically set width of container, not how to dynamically set CSS class.
Endo
Hi Shinichiro
I think i have done the same using the javascript.
let root = document.documentElement;
let width = document.querySelector('.table').offsetWidthroot.style.setProperty('--new-width', width + "px", "important");
in the above javscript i have get the table width and then the i have assigned that width to a css variable that i have defined in the screen stylesheet.
after that i have used that variable to set the container width.
in your case you can first get the parent container width and the set the child container width according to that.
Hope this help
I hope I was able to solve your issue @Shinichiro Endo. On the other hand to answer your question more directly "Is there any ways to dynamically set Container's width? "
Yes there is. You can use conditional class on Style Class parameter of an element.
You can select from:
ThemeGrid_Width1 = Col 1
ThemeGrid_Width2 = Col 2
ThemeGrid_Width3 = Col 3
....
ThemeGrid_Width11 = Col 11
ThemeGrid_Width12 = Col 12
These are the values being used in the Styles Tab Width, and follows the 12 column structure of the Layout, and is responsive by default. But of course you can always use your own custom classes as you wish. But please be careful to use best practice and make sure it's responsive.