This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 8 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Vanvigation Bar #79213

    lineker
    Participant

    Hi All,

    I am using navigation bar s follow:

    $("#jqxNavigationBar").jqxNavigationBar({ height: "100%", width: "100%", expandMode: "singleFitHeight"});

    Because expandMode is singleFitHeight, only 1 panel can be opened at the same time. This is what I want.
    But I also would like to be able close a panel like expandMode is multiple. Why is not this possible?
    When page is loaded, all panels will be closed default, I will be able to open 1 panel at the same time which means that when I open 2nd panel, already opened 1st panel will be closed but also I will be able to close 2nd panel too

    Vanvigation Bar #79246

    Hristo
    Participant

    Hello lineker,

    Please take a look this example: http://jsfiddle.net/txhi/6eodcwLb/1/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Vanvigation Bar #79349

    lineker
    Participant

    Hi Hristo,

    Toggle mode works well for opening 1 panel at same time
    But when a panel is opened, I want all other panels under it go to bottom like singlefitHeight, it does not

    Vanvigation Bar #79376

    Hristo
    Participant

    Hello lineker,

    In case when using expandMode: 'singleFitHeight', that behavior is expected.
    Please take a look this workaround:
    http://jsfiddle.net/txhi/qqnacknh/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    Vanvigation Bar #79420

    lineker
    Participant

    Hi Hristo,

    At the example you wrote at recent message, why does not it work if css is as follow:

    .content {
    height: 100p%; // setting height 100% instead of 100px
    }

    I can not set height to a scalar value because I don’t know screensize of computer
    My jqxnavigationbar is inside in a splitter, so when I open a panel, all other panels should move to bottom of splitter and this should be supplied by using 100%

    I kindly request you try following at jsfiddle code, when you copy paste it will work. (do not have jsfiddle account yet and will open)
    I want 2nd panel go to bottom when 1st panel is opened but it does not work.

    HTML:
    <div id=”mainSplitter”>
    <div>
    <div class=”content” id=’jqxNavigationBar’>
    <div>Panel 1</div>
    <div class=”content”><div class=”content”>Content 1</div></div>
    <div>Panel 2</div>
    <div class=”content”><div class=”content”>Content 2</div></div>
    </div>
    </div>
    <div>
    <div id=”mappanel” style=”height: 100%;”>
    <div id=”map”>Right</div>
    </div>
    </div>
    </div>

    Javascript :
    $(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘90%’, orientation: ‘vertical’, resizable:false,
    panels: [{ size: 200, collapsible: false }] });

    $(“#jqxNavigationBar”).jqxNavigationBar({ height: “100%”, width: “100%”, expandMode: “toggle”});

    CSS :
    html, body {
    width: 100%;
    height: 100%;
    }
    .content {
    height: 100%;
    }

    Vanvigation Bar #79433

    Hristo
    Participant

    Hello lineker,

    About described situation when content of the parent element is without height and width that happen.
    And for that need to set some value in parent and after that could use height 100% for the child.
    If you would like could read more in this article: http://stackoverflow.com/questions/7049875/height100-not-working
    Please take a look this example: http://jsfiddle.net/6mevy7hm/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.