dbGrid RowWidget expand/collapse icon

[fraxzi]

Hi All,

I searched all over but I could find a solution.

Since I don't know how to do it, I am asking if anyone knows.

How can I change icon in customCSS with fontasesome icon:

 

I tried but not working:

.x-grid-row-expander{
    content: "\f150";                           
}

 

Thanks,

Frances

 

 

 

[Hayri ASLAN]

14 hours ago, fraxzi said:

Hi All,

I searched all over but I could find a solution.

Since I don't know how to do it, I am asking if anyone knows.

How can I change icon in customCSS with fontasesome icon:

 

I tried but not working:

.x-grid-row-expander{
    content: "\f150";                           
}

 

Thanks,

Frances

 

 

 

Hi

If you want to use FontAwesome, you should use pseudo css like below

.x-grid-row-collapsed .x-grid-row-expander::before{
    content: "\f2b6";
    font-family: 'FontAwesome';
    font-size: 16px;
    background: white;
}

.x-grid-row-expander::before{
    content: "\f294";
    font-family: 'FontAwesome';
    font-size: 16px;
    background: white;
}

[fraxzi]

1 hour ago, Hayri ASLAN said:

Hi

If you want to use FontAwesome, you should use pseudo css like below

.x-grid-row-collapsed .x-grid-row-expander::before{
    content: "\f2b6";
    font-family: 'FontAwesome';
    font-size: 16px;
    background: white;
}

.x-grid-row-expander::before{
    content: "\f294";
    font-family: 'FontAwesome';
    font-size: 16px;
    background: white;
}

Hi Hayri,

 

I tried but with this result:

I there anything I need to tweak aside from CustomCSS of ServerModule?

 

Thanks for helping,

Frances

[fraxzi]

BTW, I use "uni_ubuntu_triton" theme.

Thanks,

Frances

[Sherzod]

6 hours ago, fraxzi said:

Hello,

Also add this CSS rule:

.x-grid-row-collapsed .x-grid-row-expander, .x-grid-row-expander {
    background-image: none;
}

 

[fraxzi]

26 minutes ago, Sherzod said:

Hello,

Also add this CSS rule:

.x-grid-row-collapsed .x-grid-row-expander, .x-grid-row-expander {
    background-image: none;
}

 

Hi @Sherzod,

It works!  

There's white box if expanded and when collapse.. not a problem though. I just need to center vertically the Icon.

 

Thanks much,

Frances

[fraxzi]

I found it!

"display: inline;"

 

Thanks @Sherzod and @Hayri ASLAN for the Help.

 

Regards,

Frances