Scrolls are not displayed for kendo grid in Microsoft Edge browser. It works properly when viewed in Google chrome.
I used Kendo UI property Virtual Scrolling set to true but it shows Vertical scrollbar but not horizontal one.
scrollable: {
virtual: true
},
so is there any other kendo property available to show horizontal scrollbar?
Related
Is it possible to make the popup window of the Kendo MultiSelect and ComoboBox widget resizable?
By default kendo popup window is resizable true, so you can resize it using mouse pointer through the edge of window. You can also resize it using setOptions methods after the window already generated.
var theWindow = myWindow.data("kendoWindow").setOptions({
width: "500px"
});
For more detail, I provide example to resize the window based on combobox and multiselect value. Please find code on jsfiddle.
As my example, using combobox you can resize width of the window and by using multi select you can resize width and height of the window. I call setOptions method inside onchange event of ComboBox and MultiSelect.
KendoUI version 2013.3.1119
Using Kendo MVVM
I have a color selector that I have build that uses a flat color picker and a color picker using a palette. They both function correctly but the layout of the flat color picker is off where the track for the slider does not render to the appropriate width.
If the flatcolorpicker is loaded directly in a page and not in a kendo window it renders correctly.
There are not any special settings I am applying.
<div id="flatColorPicker"
data-role="flatcolorpicker"
data-bind="value: colorPaletteValue, enabled: enableColorSelection, events: { change: colorPaletteChange }">
</div>
What I have tried
Removed all other html around it, same result within the window.
Tried to forcefully set the size of the track.
Used Chrome dev tools to manipulate the CSS.
Stepped through the Kendo UI javascript to see where it renders initially.
What worked, but not a resolution
Manually re-size the window using the mouse after initial load, it then corrects itself.
Has anyone else experienced this or has any other ideas to try?
KendoUI Window settings:
{
title: "Set Color",
resizable: false,
draggable: false,
width: 550,
height: 300,
actions: ["Close"]
}
Ran in to the same issue:
I don't know if this will fix it for you, but I fixed it by making sure the picker's container element was visible before instantiating it. My code used to look like:
$picker.kendoFlatColorPicker({
// config
})
$container.show(); // $container contains the $picker
Turns out if I just reverse the order it started working:
$container.show(); // $container contains the $picker
$picker.kendoFlatColorPicker({
// config
})
Only on first click on kendo grid widget (thead or tbody), the page scroll as shown on attached gif.
The problem is due to tabindex attribute added to table when 'allowCopy' is enabled.
Removing tabindex attribute in jquery, the scroll issue disappear, but copy doesn't work.
Any way to avoid this annoying behaviour?
I have dataview with large number of rows. I want to scroll it vertically. The scroll behavior is fine in chrome and iPad but IE 11 does not scroll. When i scroll, it goes up after scrolling. It does not stop at the scrolling position.
Try to add scrollable configuration to your navigation view and its children:
scrollable: {
direction: 'vertical'
}
I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.
I have a left pane and a center pane. I dynamically generate div
when the user clicks on the left pane. The divs are generated and
dropped on the center pane. The divs are draggable and resizable.
Everything works fine with dragging and resizing on the visible center
area. The moment I drag the div beyond the bottom, the scroll bar on
the center pane appears and it seems the center pane is extending to
accommodate the new position of the dragged div. But the moment I try
to resize the div or add another div, it jumps to the top section of
the div and resets the scrollbars. I checked the center div height in
firebug and it remains at the same height when initialized
even after dragging the new div beyond the bottom.
Here is the test page html code.
Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.
Click on "Add new"
Drag the newly added div beyond the bottom of the center pane.
The center pane shows the scrollbar as it is suppose to.
If you check the center div's height in firebug, it is not changing
Now try resizing the newly added div by dragging its handle
It jumps to the top and the center box loses its scrollbar.
I could not paste the complete html page so here is the reference to the code at the bottom of this thread
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee
And here is the test link http://jsfiddle.net/yZc63/
I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.
I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.
You can check the solution here http://jsfiddle.net/c7wrT/
Is adding the dynamic div directly to the html body a good approach?
I ran into same situation and this answer helped.
https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});