jQuery UI Widgets Forums Layouts Splitter Use of Splitter in pages with Master page.

This topic contains 10 replies, has 3 voices, and was last updated by  JKANNAN 4 years, 3 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Use of Splitter in pages with Master page. #78559

    JKANNAN
    Participant

    Hi,

    I am not able to get the splitter feature working in a page that contains master page.

    If I remove the master page, the code works.

    Can you please provide me a sample how to get the splitter functionality to work in a page that contains master page?

    Thanks

    Kannan

    Use of Splitter in pages with Master page. #78567

    Dimitar
    Participant

    Hi Kannan,

    Unfortunately, we do not have such an example. Please share if there are any errors thrown in your browser’s console. Make sure you have included the scripts necessary for jqxSplitter and that you are using the latest version of jQWidgets (3.9.1). Please also take a look at our help topic Loading Widgets in ASP.NET User Controls, which may be helpful to you.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Use of Splitter in pages with Master page. #78711

    JKANNAN
    Participant

    Hi Dimitar,

    Thanks for your response. The following is the error displayed in the browser’s console

    Uncaught Invalid HTML Structure! jqxSplitter requires 1 container DIV tag and 2 nested DIV tags.

    I have included all the required scripts for the jqxSplitter.

    The following is the code from the aspx page.

    <%@ Page Title=”” Language=”C#” MasterPageFile=”~/MasterPage.master” AutoEventWireup=”true” CodeFile=”JQSplitterToggleWithMasterPage.aspx.cs” Inherits=”JQWidgets_JQSplitterToggleWithMasterPage” %>

    <asp:Content ID=”Content1″ ContentPlaceHolderID=”head” runat=”Server”>
    </asp:Content>
    <asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>

    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”scripts/demos.js”></script>
    <script type=”text/javascript” src=”scripts/JQDateTimeInputUtils.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdatetimeinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcalendar.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtooltip.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/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”jqwidgets/globalization/globalize.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>

    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>

    <script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>

    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>

    <script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>

    <script type=”text/javascript” src=”jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxnavigationbar.js”></script>

    <script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxtree.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>

    <script type=”text/javascript”>

    $(document).ready(function () {

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

    $(‘#firstNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: 300, collapsible: false }] });

    $(‘#secondNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, showSplitBar: true, orientation: ‘vertical’, panels: [{ size: 150 }] });

    $(‘#thirdNested’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘vertical’, panels: [{ size: 150, collapsible: false }] });

    });

    </script>

    <div id=”mainSplitter”>

    <div>

    <div id=”thirdNested”>

    <div>

    <span>Panel 4</span>
    </div>

    <%– <div>

    <span>Panel 5</span>

    </div>–%>
    </div>

    </div>

    <div>

    <div id=”firstNested”>

    <div>

    <div id=”secondNested”>

    <div>

    <span>Panel 1</span>
    </div>

    <div>

    <span>Panel 2</span>
    </div>

    </div>

    </div>

    <div>

    <span>Panel 3 </span>
    </div>

    </div>

    </div>

    </div>
    </asp:Content>
    <asp:Content ID=”Content3″ ContentPlaceHolderID=”ContentPlaceHolder2″ runat=”Server”>
    </asp:Content>

    The above code works when I remove the master page and place it in the regular aspx page.

    I am currently using JQWIDGETS version 3.5.0

    Any help would be appreciated.

    Thanks

    Kannan


    Dimitar
    Participant

    Hi Kannan,

    The error “Uncaught Invalid HTML Structure! jqxSplitter requires 1 container DIV tag and 2 nested DIV tags.” is thrown because of the invalid HTML structure of thirdNested if Panel 5 is not added for some reason (the inline code in <% %>). Please make sure that by the time you call the splitters initialization code, the HTML structure is as follows:

    <div id="mainSplitter">
        <div>
            <div id="thirdNested">
                <div>
                    <span>Panel 4</span>
                </div>
                <div>
    
                    <span>Panel 5</span>
    
                </div>
            </div>
        </div>
        <div>
            <div id="firstNested">
                <div>
                    <div id="secondNested">
                        <div>
                            <span>Panel 1</span>
                        </div>
                        <div>
                            <span>Panel 2</span>
                        </div>
                    </div>
                </div>
                <div>
                    <span>Panel 3 </span>
                </div>
            </div>
        </div>
    </div>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    JKANNAN
    Participant

    Thanks Dimitar.

    That worked.

    It is really strange having a commented div tag is causing an issue when placed in the content place holder.

    The same code works without any issue when placed in a regular aspx page.

    I am having a different issue when setting the height to 100%.

    In the following code when I set the height for the mainSplitter to 100%, I am not able to see the panels displayed.

    If the set the height other than 100% it works perfectly.

    <asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”Server”>

    <script type=”text/javascript”>

    $(document).ready(function () {

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

    $(‘#contentSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’, resizable: true, panels: [{ size: ‘60%’, collapsible: false }] });

    });

    </script>

    <div id=”mainSplitter”>
    <div>
    Left Panel
    </div>

    <div>
    <div id=”contentSplitter”>
    <div class=”feed-item-list-container” id=”feedUpperPanel”>
    Grid Summary
    </div>

    <div id=”feedContentArea”>
    Grid Details
    </div>
    </div>

    </div>
    </div>

    </asp:Content>

    Thanks for your help.

    Kannan


    Dimitar
    Participant

    Hi Kannan,

    Please make sure the container of the splitter has its height set, too. This is a general CSS principle. You can read more about it here: http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Use of Splitter in pages with Master page. #79669

    JKANNAN
    Participant

    Hi Dimitar,

    The Splitter control is not working with IE9.

    It works fine in IE 10+, Chrome and Firefox.

    Can you please let me know if this control has a limitation in IE9?

    Thanks

    Kannan

    • This reply was modified 4 years, 3 months ago by  JKANNAN.
    Use of Splitter in pages with Master page. #79673

    Peter Stoev
    Keymaster

    Hi Kannan,

    There is no issue with jqxSplitter in IE9. Please, review your HTML and debug your code. Our demos are tested and work fine with IE7, IE8 and IE9 so it’s not an issue on our side.

    Best Regards,
    Peter Stoev

    Use of Splitter in pages with Master page. #79677

    JKANNAN
    Participant

    Hi Peter,

    The issue is when setting the height to 100%.

    For example in the following code, setting the height for $(‘#mainSplitter’) to 100% and running in IE9, the panel does not display.

    Just a single line is displayed.

    <script type=”text/javascript”>

    $(document).ready(function () {

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

    $(‘#contentSplitter’).jqxSplitter({ width: ’100%’, height: ’100%’, orientation: ‘horizontal’, resizable: true, panels: [{ size: ‘60%’, collapsible: false }] });

    });

    </script>

    <div id=”mainSplitter”>
    <div>
    Left Panel
    </div>

    <div>
    <div id=”contentSplitter”>
    <div class=”feed-item-list-container” id=”feedUpperPanel”>
    Grid Summary
    </div>

    <div id=”feedContentArea”>
    Grid Details
    </div>
    </div>

    </div>
    </div>

    Thanks for your help.

    Kannan

    Use of Splitter in pages with Master page. #79688

    Peter Stoev
    Keymaster

    Hi Kannan,

    Most probably your page is missing settings like “height” for the DIV/Body tag that is parent of the Splitter’s tag. As you may know, the default height of HTML Elements is “auto” so when your Splitter’s height is 100% and it’s parent height is “auto”, the result of line should be expected. Look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/splitter-with-size-in-percentages.htm?arctic to learn how to use Splitter with fluid size.

    Best Regards,
    Peter Stoev

    Use of Splitter in pages with Master page. #79738

    JKANNAN
    Participant

    Hi Peter,

    Thanks for your response.

    It appears that we need to set the height 100% for the form tag also in order to work in IE9.

    Thanks

    Kannan

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

You must be logged in to reply to this topic.