I have implemented kendoUI splitter in my application. I want to vary the height of the splitter dynamically. I defined the splitter like this:
<div id="splitter" style="height:500px;width:100%">
<div id="leftPane"></div>
<div id="rightPane"></div>
</div>
$("#splitter").kendoSplitter({
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }
],
orientation: "horizontal",
});
I don't want to display the scrollbar in the panes. I want to increase the height of the splitter, in order to remove the scrollbar. Can you tell me how to implement this?
In order to resize the splitter you can do:
// Get reference to the splitter
var splitter = $("#splitter").data("kendoSplitter");
// Set the new height to 600px
splitter.wrapper.height(600);
But since there is no redraw method in splitter you should trigger a resize event by doing:
// Trigger a resize event in splitter to force a redraw.
splitter.trigger("resize");
Related
I need to fit a container inside a table cell. Currently, I am unable to do so, and the container only shows when I manually set its height.
Here it is a fiddle showing the issue.
https://fiddle.sencha.com/#fiddle/13ug
If I set the container height to (say, 300), the container is displayed. However, I would like the container to automatically fit the colspan/rowspan and resize according to the table.
Could I please get some help? Thanks!
This will auto size the container to fill 100% of the cell height - even if the cell height increases.
initComponent: function() {
var me = this;
var tester2 = Ext.create("Ext.container.Container");
Ext.apply(tester2, {
height: "100%",
layout: "fit",
style:"background-color: red",
colspan: 5,
rowspan: 2,
});
everyone
I have a popup that opened when click button from another popup. When the popup open it has scroll bar that I don't expect it appear.
var win = $("#q-exp-add-edit-window").kendoWindow({
draggable: false,
visible: false,
modal: true,
//position: {
// top: 5,
// left: 8
//},
resizable: false,
}).data("kendoWindow");
//Set the Window Title
win.title("Entry Notes");
//Set the Window Width & Height
$("#q-exp-add-edit-window").css("width", "870");
$("#q-exp-add-edit-window").css("height", "460");
$("#q-exp-add-edit-window").html("");
win.refresh({
url: ExpensesEditGrid.urlAddEditNote + params,
iframe: true
});
//Center & Open the Window
win.center();
win.open();
Here is image:
Many thanks for help .
Decrease the inner table height and width,
so that only inner table will fit and get scrolls inside model.
check the model height and width (or try to assign)
and change the following lines, less than models size.
$("#q-exp-add-edit-window").css("width", "870");
$("#q-exp-add-edit-window").css("height", "460");
http://jsfiddle.net/jc3rj681/2/
Using the plugin jQuery UI Layout, I have several different panes. When the user resizes the window to a small size, I would like to call a function that changes the minsize and size of the pane so that I can make it smaller with the window.
I can do this, but for the changes to apply, I must toggle closed and then toggle open the pane. This creates a lot of flickering and ends up being pretty messy looking. I only need this one pane to resize in this fashion.
QUESTION: Is there a way I can apply these layout changes without having to toggle the pane twice for them to apply?
Check out this Fiddle that I made: http://jsfiddle.net/jc3rj681/2/
In here, the changes to the "width" of the show/hide button don't get applied until you toggle the pane. If you can make this width change work without toggling, I'm sure it would solve my problem as well.
$("#eastToggle").click(function () {
testLayout.toggle('east');
});
$("#attempt").click(function () {
testLayout.options.east.spacing_closed = 20;
testLayout.options.east.spacing_open = 20;
});
I'm not sure if there is a callback function or any special utility method that'll do the trick.
But you can try something like the following (probably with a resize function that'll resize the panes manually) -
var testLayout = $('body').layout({
applyDefaultStyles: true,
east: {
spacing_closed: 100, //toggler width
spacing_open: 100,
togglerLength_closed: 200, //toggler height (length)
togglerLength_open: 200
}
});
$("#eastToggle").click(function() {
testLayout.toggle('east');
});
$("#attempt").click(function() {
resize('east', 20);
});
// A function to resize the tab
function resize(region, space) {
// Width of the new center pane
var newCenterWidth = parseInt($('body .ui-layout-center').css('width').split('px')[0]) + testLayout.options.east.spacing_closed - space;
// Change the options so they don't affect the layout when you expand / collapse again
testLayout.options.east.spacing_closed = space;
testLayout.options.east.spacing_open = space;
// Manually resize the panes
$('body .ui-layout-resizer-' + region).css('width', space);
$('body .ui-layout-center').css('width', newCenterWidth);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West
<br/>
<br/>
<button id="eastToggle">Toggle East Panel</button>
<br/>
<br/>
<button id="attempt">Change Width?</button>
</div>
Is it possible to hide a div when the width changes? I know you can do it with bootstrap but I need to somehow do it without it. i need it to display:none when increase and it needs to display:block when it is returned to 612px
<div id="grid" style="width:612px"></div>
You cannot listen for a width change, instead of that you can add a new event listener (different from the kendo-ui event handler) for the same element and check the width. In that case you can show or hide the element depending on the current width.
You'd want to write something that checks the width and shows/hides it based on that width:
function checkGridWidth() {
var gridWidth = $('#grid').width();
if(gridWidth == 612){
$('#grid').show();
}else{
$('#grid').hide();
}
};
You'll probably want to check the width on document ready as well as when certain events happen, such as window width resizes or maybe clicks?? not sure what could affect the width:
$(document).ready(function() {
checkGridWidth();
});
$( window ).resize(function() {
checkGridWidth();
});
$('#someElement').click(function() {
checkGridWidth();
});
EDIT
Based on comments from OP, the need is for an event handler that will allow the #grid to be collapsed when another element is expanded...
See: http://demos.telerik.com/kendo-ui/splitter/api
And: http://demos.telerik.com/kendo-ui/splitter/events
$(document).ready(function() {
function collapseOtherSplitter() {
splitter.size(indexOfPane, 0);// where indexOfPane is the index of the pane you want to collapse
}
function onExpand(e) {
collapseOtherSplitter();
}
// One of your top, horizontal splitters that you want to collapse when the vertical splitter expands:
var splitter = $("#horiz-splitter").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "50%" },
],
});
// Your bottom, vertical splitter
$("#vertical-splitter").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "100px" },
],
expand: onExpand,
});
});
I'm making a website which is responsive so I'm working with datatables since it is responsive I want to change the datatable appearance in different #media screens. What I want to do is when I'm in desktop version the table will be in a normal state and for tablet form I want it to be in FIXED COLUMNS and when in mobile version I want it to be like
Responsive Table like so. What is best approach for this? Do I need to create multiple table or just use a script? Please let me know.
This should do the trick. You need to destroy the first DataTable before initializing it again.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
destroy : true,
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
destroy : true,
responsive: true
});
}
}
I would suggest using a single script to change the look of the table based on media screen properties. Below is an example script that would load different views of a table based on screen width.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
responsive: true
});
}
}
Responsive and Fixed Column code is taken from datatables website links you have provided. This piece of code should fire on window resize and when loading as explained here.
You can use bootstrap's class as shown in given link
http://getbootstrap.com/2.3.2/scaffolding.html#responsive