jQuery UI Widgets Forums Layouts Splitter splitter inner div issues

This topic contains 8 replies, has 3 voices, and was last updated by  mullai.b 6 years, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • splitter inner div issues #24788

    kalimuthu
    Participant

    Hi All,

    Splitter Resize issues for inner nested divs. i used 1 container div tag and 2 nested div tag inside splitters(#horizontalsplitter) the panel1 nested div works perfectly and i put inner div on panel2 is not working when normal and browser resizing. the issues is grid overflow in the panel2. please let me know the solutions.

     

    <!DOCTYPE html>

    <html lang=”en”>

    <head>

    <meta name=”keywords” content=”jQuery Splitter, Splitter Widget, Splitter, jqxSplitter” />

    <meta name=”description” content=”jQuery Splitter Widget – API. jqxSplitter is widget based on jQuery which provides an easy way to create dynamic

    layout allowing you to resize, collapse panels. These panels are actualy are HTML container’s children.

    You can create both horizontal and vertical splitters based on your needs. This is allowing you to create complex layouts.” />

    <title id=’Description’>jqxSplitter is a widget based on jQuery which provides an easy

    way to create dynamic layouts with resizable and collapsible panels.</title>

    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />

    <script type=”text/javascript” src=”../../scripts/jquery-1.8.3.min.js”></script>

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

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

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

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

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

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

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

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

    <script type=”text/javascript” src=”../../scripts/gettheme.js”></script>

    <style type=”text/css”>

    html, body

    {

    height: 100%;

    width: 100%;

    margin: 0px;

    padding: 0px;

    }

    </style>

    <script type=”text/javascript”>

    $(document).ready(function () {

    var rss = (function ($) {

    var createWidgets = function () {

    var theme = getDemoTheme();

     

    $(‘#horizontalsplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, theme: theme, orientation: ‘horizontal’, panels: [{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}] });

    });

    </script>

    </head>

    <body>

    <div id=”horizontalsplitter”>

    <div id=”panel1″>

    <div id=”jqxgrid1″>

    </div>

    </div>

    <div id=”panel2″>

    <div id=”gridborder”>

    <div id =”btndiv”>

    <button id=”button1″ class=”tabbox”>

    button1</button>

    <button id=”button2″ class=”tabbox”>

    button2</button>

    </div>

    <div id=”jqxgrid2″>

    </div>

    </div>

    </div>

    </div>

    </body>

    </html>

    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    • This topic was modified 6 years, 9 months ago by  kalimuthu.
    splitter inner div issues #24805

    Peter Stoev
    Keymaster

    Hi,

    What is “jqxgrid2” and “jqxgrid1”. Are these jqxGrid instances? How do you initialize them? Do you set the “jqxgrid2″‘s height to 100%, too or you calculate it to be equal to the total height – btndiv’s height?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    splitter inner div issues #24825

    kalimuthu
    Participant

    Hi,

    please find the issues in below source code:

    The issues in below source code:

    1) In jqxgrid1 and jqxgrid2 the grid is not properly set within specified pannel (the data is overflown, so the scrollbar’s down arrow is hidden)

    2) When i press the splitter button or i resize the panel using splitter, the jqxgrid1 and jqxgrid2 width is minimizing

    3)For panel2 i have set 20% for id=tabs and remaining 80% for id=box and grid width and height is set to 100%. But the grid is not properly fitting inside the panel2

    4) we think that the inner div inside the id = ‘panel2’ is making a problem.

    Please let me know the solutions.

    This example shows how to create a Grid from Array data.

    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: absolute;
    }
    .jqx-splitter
    {
    overflow: hidden;
    position: absolute;
    }
    div.boxcontent
    {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 29px 16px 16px 16px;
    line-height: 1.25em;
    background-color: #f3f3f3;
    border: solid 1px #d9d9d9;
    height: auto;
    }
    div.box
    {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 1em;
    border: solid 1px #c7c7c7;
    height: 50%; /*margin-top:-16px;*/
    margin-top: -8px;
    width: 100%;
    border: none;
    }

    $(document).ready(function () {
    try {

    var theme = getDemoTheme();
    // prepare the data
    var data = new Array();
    var firstNames =
    [
    “Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
    ];
    var lastNames =
    [
    “Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
    ];
    var productNames =
    [
    “Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
    ];
    var priceValues =
    [
    “2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
    ];
    for (var i = 0; i < 200; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
    }
    var source =
    {
    localdata: data,
    datatype: "array",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'total', type: 'number' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#jqxgrid1").jqxGrid(
    {
    width: '100%',
    height: '100%',
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    rowsheight: 23,
    columnsheight: 23,
    columns: [
    { text: 'Name', dataField: 'firstname', width: 100 },
    { text: 'Last Name', dataField: 'lastname', width: 100 },
    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
    { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ]
    });

    $("#jqxgrid2").jqxGrid(
    {
    width: '100%',
    height: '100%',
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    rowsheight: 23,
    columnsheight: 23,
    columns: [
    { text: 'Name', dataField: 'firstname', width: 100 },
    { text: 'Last Name', dataField: 'lastname', width: 100 },
    { text: 'Product', editable: false, dataField: 'productname', width: 180 },
    { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ]
    });

    $('#panel1').jqxPanel({ width: '100%', height: '100%', sizeMode: 'wrap' });
    $('#panel2').jqxPanel({ width: '100%', height: '100%', sizeMode: 'wrap' });

    $('#horizontalsplitter').jqxSplitter({
    width: '100%',
    height: '100%',
    theme: theme,
    splitBarSize: 16,
    orientation: 'horizontal',
    panels: [{ size: '50%', collapsible: true },
    { size: '50%', collapsible: true}]
    });

    } catch (e) {
    alert("err " + e.Message);
    }
    });

    button1

    button2

    button3

    • This reply was modified 6 years, 9 months ago by  kalimuthu.
    splitter inner div issues #24828

    Peter Stoev
    Keymaster

    Hi,

    1. The first issue is that you initialize a widget from the Splitter’s HTML Structure. If you want to add content to the Splitter, then add it inside the Split Panels. You should not initialize a widget from a Split Panel or change the Split Panels Style. All layout settings are handled by the Splitter itself.
    2. You should take into account in the code that height = 100% of jqxGrid2 + your button’s DIV height is more than 100%. This means that you will have to set your button’s DIV height in percentages(ex: 20%) and your Grid’s height in percentages, too(ex: 80%) so the total should be 100%. If it is more than 100%, a scrollbar should be expected to be displayed as the content will overflow.
    3. You may learn how to create Fluid Layout with jqxSplitter from this sample:http://www.jqwidgets.com/fluid-layout-with-fixed-header-and-footer/
    4. The jqxPanel’s “wrap” mode expects the content inside the panel to be with automatic height or fixed, not set in percentages. The reason is that the panel will try to auto-size itself using the size of something which tries to fill the panel
    That means that this setting should be either removed or you should change the “width” and “height” properties of the content inside the jqxPanel.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    splitter inner div issues #24832

    kalimuthu
    Participant

    full code is not appended above. i will create new task

    splitter inner div issues #24863

    kalimuthu
    Participant

    the issue is not yet solved, i posted another one to full code .. please let me know the solutions

    splitter inner div issues #24870

    Peter Stoev
    Keymaster

    Hi,

    Please, look at my post as a guidance and avoid double postings. In addition, if you want to format your code in the Forum, you can learn how to do that from here: http://www.jqwidgets.com/community/topic/welcome-to-jqwidgets-forum/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    splitter inner div issues #24882

    kalimuthu
    Participant

    cannot able to append full code . my browser issues

    • This reply was modified 6 years, 9 months ago by  kalimuthu.
    • This reply was modified 6 years, 9 months ago by  kalimuthu.
    splitter inner div issues #24929

    mullai.b
    Participant

    jqxSplitter is a widget based on jQuery which provides an easy
    way to create dynamic layouts with resizable and collapsible panels.

    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    }

    $(document).ready(function () {
    var rss = (function ($) {
    var createWidgets = function () {
    var theme = getDemoTheme();

    $(‘#horizontalsplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, theme: theme, orientation: ‘horizontal’, panels: [{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}] });
    });

    button1

    button2

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

You must be logged in to reply to this topic.