jQuery UI Widgets Forums Navigation Expander Expander: Same border radius as jxqGrid

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 5 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Expander: Same border radius as jxqGrid #64613

    badera
    Participant

    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

    Expander: Same border radius as jxqGrid #64618

    Nadezhda
    Participant

    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/

    Expander: Same border radius as jxqGrid #64628

    badera
    Participant

    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

    Expander: Same border radius as jxqGrid #64937

    Nadezhda
    Participant

    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/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.