Skip to Content (Press Enter)
UserImage.jpg
JaeHun Park
173Views
6Comments
Solved
[OutSystems Data Grid] How to vertically align the contents of merged cells
Question
DataGrid
Forge
outsystems-data-grid
Reactive icon
OutSystems Data Grid (O11)
Forge asset by OutSystems

I use MergeColumnCells Client Action to Grouping Cell have same value. 

I can align cell's values horizontally with Align property in Column Optional Confings. 

But if i want to align them vertically, what should i do ?

0
0
11 Aug 2023
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Replying to JaeHun Park's comment on 18 Aug 2023 07:13:12

Hello @JaeHun Park 

In that case, you can simply add the following CSS selector:

.wj-flexgrid .wj-cell:not(.wj-hasdropdown):not(.wj-header) > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Cheers,
GM

See solution in context
1
0
18 Aug 2023
Copy Link
2023-07-04 22-25-22
Mohamed Medhat

Hi @JaeHun Park,

what you can do is to add css class (e.g. TableRecords_CellMerge) and apply this class to the container that hold the expression.

.TableRecords_CellMerge {

    text-align: center;

}


2
0
12 Aug 2023
Copy Link
UserImage.jpg
JaeHun Park

Thanks! @Mohamed Medhat 

But i got second problem. 

I need "text-overflow : ellipsis" property.

However if i use "display : flex" , ellipsis doesn't work like image. So i added ellipsis  property at element.style in chrome. but nothing changed. 

Could you help me one more?   

Thanks you. 


0
0
18 Aug 2023
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @JaeHun Park 

Please check directly on Wijmo's documentation for the right way to implement this on your CSS (check the styles.css file):

Hope it helps!

Cheers,
GM


2
0
18 Aug 2023
Copy Link
UserImage.jpg
JaeHun Park

Hi @Gonçalo Martins 


First, I solved problem with your help. Thanks you!

And then i need "text-overflow : ellipsis" property.

However if i use "display : flex" , ellipsis doesn't work like image. So i added ellipsis  property at element.style in chrome. but nothing changed. 

Could you help me one more?   

Thanks you. 

0
0
18 Aug 2023
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Replying to JaeHun Park's comment on 18 Aug 2023 07:13:12

Hello @JaeHun Park 

In that case, you can simply add the following CSS selector:

.wj-flexgrid .wj-cell:not(.wj-hasdropdown):not(.wj-header) > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Cheers,
GM

1
0
18 Aug 2023
Copy Link
UserImage.jpg
JaeHun Park

Replying to Gonçalo Martins' comment on 18 Aug 2023 14:43:56

Hello @Gonçalo Martins 

Thanks you for your help GM. 

I didn't complete that problem. So i decide to proper width of cells.

Anyway, i really appreciate to you GM. Thanks you.

Have a nice day! 

1
0
21 Aug 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.