jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by PTBD 10 years, 1 month ago.

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

Author

Fitting Table (and other widgets) into North, South, East, West and Center Layou Posts

June 15, 2015 at 8:25 am Fitting Table (and other widgets) into North, South, East, West and Center Layou #72477

PTBD

Participant

Hello,

I am evaluating jqWidgets by creating a small simple application and encountered a small problem of which I am not sure how to solve.
I also have to say that my knowledge of HTML and JavaScript is still very young. I am learning by burning.

I have the problem that, after that layout is created in the center it doesn not scale in width if the east panel is resized. Same goes for the Navigation Bar Widget which is placed in the west panel. If the width for the widget is set to “100%” it’s width fills the screen.

I have found a example in the jQWidget Blot but this is only applied if the application is splitted to west and east. For me the solution unfortunatly does not work. Is there a way to achieve what I want?

This is a snippet of my application:

<!DOCTYPE html>
<title>jQWidget</title>
<html>
    <head>
        <link rel="stylesheet" href="/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="/js/jQWidgets/jqwidgets/styles/jqx.base.css"/>

        <style type="text/css">
            html, body
            {
                height:   100%;
                width:    100%;
                margin:   0px;
                padding:  0px;
                overflow: hidden;
                border:   none;
            }
        </style>

        <script type="text/javascript" src="/js/jquery/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxnavigationbar.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="/js/jQWidgets/jqwidgets/jqxgrid.pager.js"></script>

        <script id = "Init Application" type="text/javascript">
            function initAppLayout() {
                 $("#splt_head").jqxSplitter({
                    height: "100%",
                    width: "100%",
                    orientation: "horizontal",
                    resizable: false,
                    showSplitBar: false,
                    panels: [
                        {size: 40, min: 40, collapsible: false},
                        {size: "95%", collapsible: false}
                    ]
                });

                $("#splt_foot").jqxSplitter({
                    height: "100%",
                    width: "100%",
                    orientation: "horizontal",
                    resizable: false,
                    showSplitBar: false,
                    panels: [
                        {size: "95%", collapsible: false},
                        {size: 40, min: 40, collapsible: false}
                    ]
                });

                $("#splt_center").jqxSplitter({
                    height: "100%",
                    width: "100%",
                    orientation: "vertical",
                    resizable: false,
                    showSplitBar: true,
                    splitBarSize: 10,
                    panels: [
                        {size: "15%", collapsible: true, },
                        {size: "85%", collapsible: false}
                    ]
                });

                $("#splt_grid").jqxSplitter({
                    height: "100%",
                    width: "100%",
                    orientation: "vertical",
                    resizable: true,
                    showSplitBar: true,
                    splitBarSize: 10,
                    panels: [
                        {size: "100%", min: 900, collapsible: false, },
                        {size: "30%", collapsible: true, collapsed: true}
                    ]
                });
            }

            function initNavigationBar() {
                // ...
            }

            function initGrid() {
                // ...
            }
        </script>

        <script type="text/javascript">
            $(document).ready(function () {
                initAppLayout();
                initNavigationBar();
                initGrid();
            });
        </script>

    </head>
    <body class="default">
        <div id="splt_head">
            <div id="appHeader">
            </div>
            <div>
                <div id="splt_foot">
                    <div>
                        <div id="splt_center" >
                            <div id="appNavigationBar">
                                <div style="float: left">
                                    <div style="margin-left: 20px">
                                        <b>...</b>
                                    </div>
                                </div>
                                <div>
                                    <!-- Navigation Bar Elements -->
                                </div>
                                <div style="float: left">
                                    <div style="margin-left: 20px">
                                        <b>...</b>
                                    </div>
                                </div>
                                <div>
                                    <!-- Navigation Bar Elements -->
                                </div>
                            </div>

                            <div>
                                <div id="splt_grid">
                                    <div id="appGrid">
                                    </div>

                                    <!-- DATA INFORMATION -->
                                    <div id="appInformation">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="appFooter">
                    </div>

                </div>
            </div>
        </div>
    </body>
</html>

June 15, 2015 at 9:31 am Fitting Table (and other widgets) into North, South, East, West and Center Layou #72479

PTBD

Participant

height="100%" does actually work correctly. But not the width.

June 15, 2015 at 9:40 am Fitting Table (and other widgets) into North, South, East, West and Center Layou #72481

Peter Stoev

Keymaster

Hi PTBD,

Your Splitter settings are wrong. Please refer to the Splitter’s demos to learn how to use it. The size of the 2 panels should be 100%, not 100 + something else.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 15, 2015 at 11:23 am Fitting Table (and other widgets) into North, South, East, West and Center Layou #72486

PTBD

Participant

Hello Peter,

thank you for your reply.

But in which way are my settings wrong? According to the documentation it is also possible to use fixed widh sizes (which is what I need for some panels like header, footer and west panel. Or is it not allowed to mix fixed sized and %-values?

I’m sorry if I understand you wrong.

June 15, 2015 at 11:35 am Fitting Table (and other widgets) into North, South, East, West and Center Layou #72489

Peter Stoev

Keymaster

Hi PTBD,

The total size of the both panels should be 100% or The Size of the Splitter if you use Fixed Size. If you use Percentage for one of your panels, then how would you calculate the Fixed Size of your Other panel? You can’t.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 15, 2015 at 12:02 pm Fitting Table (and other widgets) into North, South, East, West and Center Layou #72496

PTBD

Participant

Hello Peter,

after changeing all values to %-values the issue is still present. The NavigationBar Headers width is still over the whole browser screen in width and the grid still doesn’t scale right.

After taking a look around in the forums I have found this post: http://www.jqwidgets.com/community/topic/fullscreen-splitter/
But this doesn’t work at all for me. As far as I can see the jqxSplitter expects two div’s to split. But in the example are three given. I guess more than two div’s were only supported in older versions?

EDIT: I think I have found my problem. I was understanding someting wrong here and will try to fix it. Thanks for your time Peter.

Author

Posts

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

You must be logged in to reply to this topic.