jQuery UI Widgets Forums Navigation Tabs Tab covering title as well

This topic contains 4 replies, has 2 voices, and was last updated by  sdalby 11 years, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Tab covering title as well #9707

    sdalby
    Member

    By looking in your example code I found out that a way to make a child cover all of its parent client area, one could set the the size to 100% – just like in plain html.

    I have following construct:

    <div id='GraphicsWindow'>
    <div>
    Resume
    </div>
    <div style="overflow: hidden;" id="windowContent">
    <div id="GraphicsPopupTab">
    <ul style="margin-left: 30px;">
    <li>Pie chart</li>
    <li>Graph</li>
    </ul>
    <div>
    <div style="text-align: center;">
    <div style="font-size: 80%; padding: 20px">
    Most time consuming services<br />
    Compared to the time consumption of the next 10 most consuming services
    </div>
    <br />
    </div>
    <div id='jqxChart' style="margin-left: 12px; width: 680px; height: 380px; position: relative;
    left: 0px; top: 0px; border: 0px none">
    </div>
    </div>
    <div>
    <div id='jqxGraphChart' style="width: 680px; height: 460px; position: relative; left: 0px;
    top: 0px;">
    </div>
    </div>
    </div>
    </div>
    </div>

    A popup window with at title bar and a Tab control that should occupy the entire window.

    When I do this>:

    $('#GraphicsPopupTab').jqxTabs({ height: '100%', width: '100%', theme: theme, initTabContent: initWidgets });

    It also occupies the header, but it is a child of windowContent and not GraphicsWindow.

    If I try to set down the heigth percentage, it centers in the windowContent and covers the title partially. I have tried to use:

    <div id="GraphicsPopupTab" style="vertical-align: bottom">

    but it did not make any difference

    Can you explain

    Thanks in advance

    /Søren

    • This topic was modified 11 years, 8 months ago by  sdalby.
    • This topic was modified 11 years, 8 months ago by  sdalby.
    • This topic was modified 11 years, 7 months ago by  sdalby.
    Tab covering title as well #9733

    Peter Stoev
    Keymaster

    Hi sdalby,

    The jqxWindow’s Default Functionality demo is with jqxTabs within the window and the tab fills the window’s content. I suggest you to take a look at that sample.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tab covering title as well #9761

    sdalby
    Member

    Hi,

    Yes and thats the example that I formed this code upon, but in my case it covers the title. I dont know how 100% size can affect the window title when the parent of the tab is a child of the window.

    I have also tried to set the size in pixels but THE CORE IF THE PROBLEM IS THAT IT CENTERS IN GraphicsWindow AND NOT IN windowContent

    Thanks in advance

    Tab covering title as well #9770

    Peter Stoev
    Keymaster

    Hi sdalby,

    I’ve prepared for you a working sample. Please, find the code below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#GraphicsWindow").jqxWindow({ width: 500, height: 500 });
    $('#GraphicsPopupTab').jqxTabs({ height: '100%', width: '100%', theme: 'classic' });
    });
    </script>
    </head>
    <body>
    <div id='GraphicsWindow'>
    <div>
    Resume
    </div>
    <div style="overflow: hidden;" id="windowContent">
    <div id="GraphicsPopupTab">
    <ul style="margin-left: 30px;">
    <li>Pie chart</li>
    <li>Graph</li>
    </ul>
    <div>
    <div style="text-align: center;">
    <div style="font-size: 80%; padding: 20px">
    Most time consuming services<br />
    Compared to the time consumption of the next 10 most consuming services
    </div>
    <br />
    </div>
    <div id='jqxChart' style="margin-left: 12px; width: 680px; height: 380px; position: relative;
    left: 0px; top: 0px; border: 0px none">
    </div>
    </div>
    <div>
    <div id='jqxGraphChart' style="width: 680px; height: 460px; position: relative; left: 0px;
    top: 0px;">
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tab covering title as well #9772

    sdalby
    Member

    Hi Peter

    When I run your example it runs perfectly, but when I embed it into my page it doesn’t.

    But okay, my page is quite complex and I have some other special stuff going on regarding graphs that are shown in that window so maybe there is some sort of conflict between the components that I cannot figure out.

    I will try to remove the border around the tab and the graph and so the result will become more graphically appealing.

    The most important thing is that it works well in more normal conditions.

    Thank you so much for your assistance.

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

You must be logged in to reply to this topic.