Tab covering title as well - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: jquery dialog, jquery tab control, jqxTabs, jqxwindow, Tabs

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

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

Author

Tab covering title as well Posts

October 18, 2012 at 3:19 pm 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

October 18, 2012 at 10:14 pm 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

October 19, 2012 at 9:14 am 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

October 19, 2012 at 10:45 am 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

October 19, 2012 at 11:21 am 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.

Author

Posts

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

You must be logged in to reply to this topic.