jQuery UI Widgets › Forums › Layouts › Splitter › splitter inner div issues
Tagged: javascript splitter
This topic contains 8 replies, has 3 voices, and was last updated by mullai.b 11 years, 8 months ago.
-
Author
-
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>
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 StoevjQWidgets Team
http://www.jqwidgets.comHi,
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
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 StoevjQWidgets Team
http://www.jqwidgets.comfull code is not appended above. i will create new task
the issue is not yet solved, i posted another one to full code .. please let me know the solutions
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 StoevjQWidgets Team
http://www.jqwidgets.comcannot able to append full code . my browser issues
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
-
AuthorPosts
You must be logged in to reply to this topic.