I have a Kendo listbox with a toolbar that allows sorting (up/down) and delete of a list item. When my listbox has enough items that extends it beyond the view of a mobile device, scrolling down causes the toolbar to scroll off screen. Because of this, if a user wants to move the bottom item of the listbox up, they have to scroll down, select the item, then scroll back up to access the toolbar actions, which makes for poor user experience. How can make the toolbar scroll along with list, or even just duplicate the toolbar at the bottom of the list?
Here is my widget definition:
$("#myMenus").kendoListBox({
selectable: "multiple",
toolbar: {
scrollable: true,
tools: [ "moveUp", "moveDown", "remove" ]
},
reorder: function(e) {
e.preventDefault();
var UID = $(e.items[0]).attr("data-uid");
var dataSource = e.sender.dataSource;
var dataItem = e.dataItems[0]
var index = dataSource.indexOf(dataItem) + e.offset;
dataSource.remove(dataItem);
dataSource.insert(index, dataItem);
e.sender.wrapper.find("[data-uid='"+UID+"']").addClass("k-state-selected");
},
});
I was able to fix the location of the toolbar using CSS. This is needed if your listBox is going to use a non-fixed height, as in my case, I needed to use "height:100%" so the size of the listBox would equal the content. You'll need to play around with the width and margin-left values to suit your situation.
<style>
.k-listbox {
width: 275px;
height: 100%;
}
.k-listbox-toolbar {
top:10;
position:fixed;
width:auto;
z-index: 1;
margin-left: 42px !important;
}
</style>
Related
I've built a sticky navbar based on an example from W3 schools. It's working very well — except when I resize the window, the alignment of the nav menu to the page content is incorrect.
You'll see that I've got some code that finds the correct offset for left side of menu, by checking another element on the page. It then adds some left padding to align it properly. (Without this, the position:fixed value just sends the sticky nav to the far left of the page).
This works great on scroll! However, if the window is resized horizontally, that left padding value doesn't update.
I've tried a few iterations of $(window).resize but haven't been able to get it to work. I'm sure it's an easy line of code I'm just not figuring out. Thanks in advance!
setTimeout(function () {
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("app");
// Get the offset position of the navbar
var sticky = $("#app").offset().top
// Find correct offset for left side of menu (by checking #title element)
var element = document.getElementById('title');
var leftPos = element.getBoundingClientRect().left + window.scrollX;
var roundLeft = (Math.round(leftPos)) - 5;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.style.cssText = "padding-left:" + roundLeft + "px!important";
} else {
navbar.classList.remove("sticky");
navbar.style.cssText = "padding-left:inherit";
}
}
}, 4000);
.sticky {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.99);
z-index: 9 !important;
max-width: none !important;
box-shadow: 0px 1px 10px #999;
}
(I'm using setTimeout because our Shiny app takes a few seconds to load and for the content to populate.)
You should use pure CSS solution with position: sticky
It does have acceptable percentage of browser support:
https://caniuse.com/#feat=css-sticky
Since it's just the styling, it may be fine to show it static in the old browsers.
I tried to disable the graph by not allowing the cells on graph with follow code.
graph.setCellsSelectable(false);
but it is not working, still can select cell, (only disabled resizing)
And for the toolbar to be disabled, I tried to remove or replace ondrag event, is that correct? In theory I think mxgraph has their own event handler for dragging of toolbar item.
mx_toolbar.appendChild(
mxUtils.button("Disable/Enable", function() {
document.querySelectorAll('.toolbar > button').addEventListener(function (e) {
e.preventDefault()
return false;
});
}
)
Hope your help. I dont mind as long as it is working solution.
Thanks
Instead of removing or modifying the event handler, you can simply overlay the area you want to disable along with css.
var toolbarContainer = document.querySelector(".toolbar");
var overlay = document.querySelector(".toolbar-overlay")
if (!overlay) {
overlay = document.createElement('div')
overlay.className = 'toolbar-overlay'
toolbarContainer.appendChild(overlay)
} else {
overlay.parentNode.removeChild(overlay)
}
Here is css for the overlay div
.toolbar-overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0.4;
background: #e1e1e1;
}
Note: You should make sure the parent div of the overlay div must positioned as relative to make this css working!
How to allow fixed height in this dropdown menu? (Column Car)
I have been fiddling endlessly to fix the height issue. I want a fixed height dropdown menu max 300px. I have used AutoRowSize height feature and other height features within the handsontable site, but none seem to have worked.
I have run out of ideas. Any suggestions or alternatives I can try?
I am using Handsontable in Handsontable feature (Found Here).
Fiddle http://jsfiddle.net/72dgoLva/3/
columns: [
{
type: 'handsontable',
handsontable: {
colHeaders: ['Marque', 'Country', 'Parent company'],
autoColumnSize: true,
data: manufacturerData,
getValue: function() {
var selection = this.getSelectedLast();
// Get always manufacture name of clicked row
return this.getSourceDataAtRow(selection[0]).name;
},
}
},
{type: 'numeric'}
]
.handsontableEditor .ht_master {
height: 300px;
overflow-y: auto !important;
width: calc(100% + 2px);
}
.handsontableEditor .ht_clone_top {
transform: none !important;
}
... seems to do the job. Updated fiddle.
I had to use !important to override inline styles placed by HoT on elements, on the fly. To limit the chances of this affecting other instances, prefix selectors with a specific identifier for this instance.
Is it possible to style the combo box container using the Select2 jQuery plugin? I can successfully style the dropdown menu where autocomplete selections appear, but not the container where text is entered. Here's what I'm doing:
$(document).ready(function() {
$("#combo").select2({
data:[{id:0,text:'One'},{id:1,text:'Two'}],
multiple: true,
createSearchChoice: function (term) {
return { id: term, text: term };
},
containerCss: 'container',
dropdownCssClass: 'dropdown',
containerCss: {
background: 'green'
}
});
});
<input type="hidden" id="combo" style="width:350px" />
#combo {
background: green;
}
.container {
background: green;
}
.dropdown {
background: red;
}
The container should be green, but it's not. Here's a fiddle.
Edit:
I noticed on the documentation page for the site (which is quite comprehensive) that every example of the kind I'm trying to do (hidden input field with dynamically loaded options) has the same standard style, like in my example fiddle. The version that originates from a select element, however, has rounded corners etc. If this means you can't style the container when using a hidden input, it's seems like an odd limitation.
Edit2:
#emmanuel has already provided a solution, but since I was actually after the border-radius, there was a bit more to do to get it working properly. After setting the radius on all corners, opening the dropdown results in rounded corners visible between the top of the dropdown and the bottom of the container, which is a bit ugly. You can do something like this to fix it:
$('ul.select2-choices').on("select2-open", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '0px',
'border-bottom-right-radius': '0px',
});
});
$('ul.select2-choices').on("select2-close", function() {
$('ul.select2-choices').css({
'border-bottom-left-radius': '5px', // or whatever
'border-bottom-right-radius': '5px', // or whatever
});
});
I think this will cause a problem, though, for any other Select2 combo boxes visible on the same page.
In order to add background color to container you have to put the rule to #s2id_combo. The problem is that ul.select2-choices already has a background and it's over container so you have to add:
ul.select2-choices { background: green !important; }
I have a select list inside a dialog box:
<div id='Dialog' title='Title'>
<div id='list_container'>
<select id='file_list' multiple='multiple'>
</select>
</div>
</div>
I'm populating file_list in javascript. The css for list_container and 'file_list` look like this:
#list_container {
width: auto;
height: auto;
overflow: auto;
border: 1px black solid;
margin: auto;
}
#file_list {
border: none;
}
The file_list opens inside a dialog box and typically has many options(>20). When the dialog box pops up, the list shows about 10 entries and I can scroll down to other entries. However, I want the list to expand vertically when I resize the dialog box vertically (i.e. the list should show more than 10 entries depending on the vertical space available in the dialog box). How can I do this? I tried doing a few things like setting the height css attribute for file_list to auto , but it doesn't seem to work.
You could use something similar to the following either called during an event call or otherwise at a point when the elements have been added to the body
var width = document.getElementById("list_container").offsetWidth;
document.getElementById("file_list").style.width = width;
This is similar to the answer provided by SOliver. I solved it by firing a function at the dialog resize event, and modifying the size attribute of the select-list depending on the height of the dialog box:
$('#Dialog').dialog({
height: 460,
width: 500,
//Add a function on the dialog resize event
resize: function(event, ui) {
var default_height = 460; //default height
var new_height = ui.size.height; //Gives height after resize
if (new_height > default_height) {
var list = $('#file_list');
var row_height = ((flist.height())/(flist.attr('size')));
//Get height of one row
var extra_space = new_height-default_height;
var list_newSize = Math.floor(extra_space/row_height) + 11;
//11 is the default or minimum 'size' of file_list
flist.attr('size',list_newSize);
}
}
);
Make sure you set the height and width of the div that contains select list to auto. Now the size of the list should scale with the size of the dialog box.
Though this works, it seems like an ad-hoc solution. Any there any more elegant ways to do this?