Expander: Same border radius as jxqGrid

[baderaParticipant]

Dear all

If we have some jqxExpanders and some jqxGrids on the same page, it is in design aspects bad, that the expander has no border radius in opposite to the grid. (I know that I could turn off the border radius in general -> then it would match; however, the border radius needs to be kept.)

What is the correct way to achieve that
a) in collasped mode, the expander header has on all 4 corners a border radius
b) in expanded mode, the header has on the two top corners the radius and the “content”-field has on the two bottom corners the radius.

Thanks in advance for your help!
– badera

[NadezhdaParticipant]

Hello badera,

You can check if jqxExpander is collapsed or expanded with ‘collapsed’ and ‘expanded’ events. Then you should add classes for rounding corners:
-top-left corner with “jqx-rc-tl” class
-top-right corner with “jqx-rc-tr” class
-bottom-left corner with “jqx-rc-bl” class
-bottom-right corner with “jqx-rc-br” class

Here is an example:

$("#jqxExpander").bind('expanded', function (event) {
    $('.jqx-expander-header').addClass("jqx-rc-bl");
});

If it is needed you can remove duplicated class: $('.jqx-expander-header').removeClass("jqx-rc-bl");

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[baderaParticipant]

Dear Nadezhda

Thank you very much for your answer! It works like a charm.

In addition, if I could turn off the focus border, I would be 100% happy. (The dark border around the header-div / content-div, if we click inside the header / content.)
Do you also have a tip for that? Thank you!

Best regards,
– badera

[NadezhdaParticipant]

Hi badera,

You can change the focus border color to the same color of normal border via css. Here is an example:

<style>
    .jqx-fill-state-focus {
        border-color: #aaa;      
    }
</style>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts