jQuery UI Widgets Forums Navigation Ribbon Hide Title Bar

This topic contains 2 replies, has 2 voices, and was last updated by  Dinesh Kumar 8 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Hide Title Bar #77524

    Dinesh Kumar


    when the jqxribbon have one item i don’t want to display the title bar.how can i do this.

    Hide Title Bar #77526


    Hello Dinesh,

    Generally why would you even use ribbon if you have just 1 element?

    The ribbon does not have such functionality, but you may be able to achieve this effect by toggling a class that would hide the menu when you have just 1 option to display. For example:
    $("#jqxRibbon ul.jqx-widget-header").toggleClass('hiddenClass')

    and set visiblity: hidden for that class as css rule.

    However you are likely to get side effects from this like missing borders that would be attatched to the menu.

    You could try to just set the height of the element to 0 instead of hiding it. (Should probably use width for vertical ribbon)

    .hiddenClass {
        height: 0;
        min-height: 0;

    This will keep the border, but the blank space will still be there and you will see missing side borders on that window, so to adjust that you will probably need to move the content.

    $("#jqxRibbon .jqx-widget-content").toggleClass('moveContentClass')
    and set that moveContentClass with negative margin.
    e.g. for top placed ribbon

    .moveContentClass { margin-top: -15px; }

    Though this is just a suggestion and is entirely up to you on how to implement it.
    There are probably others maybe even more efficient methods to achieve this.

    Best Regards,

    jQWidgets Team

    Hide Title Bar #77578

    Dinesh Kumar

    Hi Vladimir,

    I am using JqxDockingLayout widget.it have ribbon plugin for panel group functionalities
    When the panel have one item .it must use full space of the panel.this is my scenario.

    $("ul.jqx-widget-header").filter(function () { return $(this).children("li").length == 1 }).toggleClass('hiddenClass')
    above code is working fine.
    Thanks Mr.vladimir.

    Dinesh Kumar

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

You must be logged in to reply to this topic.