Josep Chaqués Ojeda
Rank: #6321
16Views
8Comments
How can I remove the spaces from the columns?
Question
DataGrid
Front-end
HTML
Traditional Web
Development

Hi,

I have validations and there are empty spaces in the column. I am using the widget Columns4

¿How can I remove the blanks?


Thanks.


0
0
on 22th Jan
Copy link to comment
João Marques
Rank: #55

Hi Josep,


If you are using Columns4 widget, you want to distribute your content through columns and you can do that by placing the content inside the Column1, Column2, Column3 and Column4 placeholders (see Widget Tree below):


Additionally, you can control the gutter size (space in between columns), you just have to make sure you referenced the GutterSize static entity from OutSystemsUI. You have an option there None (as you see in the image) but there are others with different space sizes.


Hope it helps.


Regards,
João

0
0
on 22th Jan
Copy link to comment

Hi João,


Thank you for you message but...I have not solved the problem, I still get 2 empty spaces :(

Regards,

0
0
on 22th Jan
Copy link to comment
0
0
on 22th Jan
Copy link to comment
João Marques
Rank: #55

Replying to Josep Chaqués Ojeda's comment on 22 Jan 2021 13:36:45

Can you share your Widget Tree?

You should have only 1 widget Columns4 and spread the content among the Column1, Column2, Column3 and Column4 placeholders as on screenshot shared above.

0
0
on 22th Jan
Copy link to comment
João Marques
Rank: #55

Replying to Josep Chaqués Ojeda's comment on 22 Jan 2021 13:39:01

If you just want 2 columns, why don't you use the Columns2 widget, instead?

0
0
on 22th Jan
Copy link to comment

Replying to João Marques' comment on 22 Jan 2021 13:41:17

I have a 4 column "widget" because I have 4 fields, one per column, but due to validations only 2 are visible and they look separate.

My idea would be to remove that blank space. It's possible?

0
0
on 22th Jan
Copy link to comment
João Marques
Rank: #55

Replying to Josep Chaqués Ojeda's comment on 22 Jan 2021 14:50:47

Hi Josep,


Yes, you would have to have the hidden fields hidden by an If and to use CSS to make the columns to disappear if they are empty.

So if your first and fourth column are filled, you want the second and third column to disappear.

For that, you should place the below CSS on your Theme:


.columns-item:empty {

    display: none;

}

2
0
on 22th Jan
Copy link to comment

Replying to João Marques' comment on 22 Jan 2021 14:58:09


Nope..not fixed, attached screenshot and style added

Does it happen to you?

Thanks!!

0
0
on 22th Jan
Copy link to comment