I am working with handsontable [JavaScript Spreadsheet
library] and want to toggle settings with a bootstrap-styled-checkbox. The first thing was, to set a specific width and height to the table when the box is checked and to undo this fixed size (so it automatically resizes again) when uncheck the box.
Here is my current code:
$('#mycheckbox').click(function() {
if($('#mycheckbox').prop("checked") == true){
handsontable_table.updateSettings({
width: 725,
height:100
})
}else{
handsontable_table.updateSettings({
// missing :(
//UPDATE:
width: null,
height: null
})
}
});
At first, my handsontable-table is automatically sized to the correct size. When I check the checkbox, the table resizes to the given width and height. But I don't know how to remove this width- and height-settings. I tried to set them to 'false' or 0 or remove these settings with jQuery-.removeProp(), but none of them does what I want. And I can't find something right in the handsontable-docs (or other sites).
I very appreciate your help!
EDIT
I found a solution: You just have to set the width and height to null. See edit above.
But there is something strange going on when I minimize my table and maximize it again - at first, my div below the table slides up to the new bottom of my table, but when it gets big again, the div doesn't move anymore, its overlapping with the table...
However, I still don't know how to remove settings from a handsontable...
As you mentioned in your edit, by updating the value to null it appears to be one way to reset a setting with in Handsontables options. It my experience you do not want to set the height and width to null, but instead update it to a new value.
If you were clearing out a setting like nestedHeaders for example; you would just set the value to null to stop using the nestedHeaders feature. However, that doesn't work for every option.
If you are trying to expand and collapse a handsontable then setting the height and width to null or zero is not going to be the best solution. You should update the parent div to display null using jQuery(handsontable's parent selector).hide() or .show().
Related
I have a grid that I want it's width to be always 100 % of the container.
I got his working by setting autowidth: true. Now the problem is that when I hide a column my grid no longer expands to 100% of parent's width.
Here is an example illustrating the issue.
De-comment the line with in the load complete to see both cases.jsfiddle
loadComplete: function(data){
//$(this).hideCol(['number']);
}
This is happening because you're hiding the column after the grid has finished loading, e.g. the total width has already been calculated. If you always want the 'number' column hidden then just add the hidden: true property to it.
Modified fiddle: http://jsfiddle.net/fo3wb58w/
If you want to dynamically hide columns at startup (your question doesn't make this clear) then please take a look at How to adjust the column width of jqgrid AFTER the data is loaded?
I have an issue when I'm clicking first time to column's span-resizer --> column width returns to some default calculated value. The same thing appears when I'm trying to resize it: it resizes not from current width, but from that calculated!
This shows my table after page load: columns' width are good.
screenshot after page load
But after clicking to resize State column --> it's just returns to some value (in that case
screenshot after click on column resize
How can I fix this issue?
P.S. Sorry, I have no enough rep to add images.
jqGrid hold column header and the column data in separate dives. So jqGrid have to hold scroll position of the header div (hDiv) the same as the scroll position of the div with the grid body (bDiv). I think that jqGrid have a bug in your situation. As the workaround you can use resizeStop where one set the scroll position of hDiv to the current scroll position of bDiv:
resizeStop: function () {
this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;
}
I think that it should solve the problem.
I was trying to create a dropdown that had dynamic values, basically there are 5 text boxes and a drop down on a page and the dropdown gets the values from those textboxes. If the user enters some text that is bigger than the width of the drop down then it is skewed on IE.
I fixed that by select:hover{width:auto;position:absolute}. Now the problem is if the user enters values that are all smaller than the original size of dropdown it contracts, I want a way so that it doesn't contract and still expands. Any thoughts??
I am using dojo and javascript, cant use jquery.
In JavaScript find the max width of the text, if it is bigger than the dropdown's current width, change the width to the max width of the text.
This will work like you desire (width not contracting) when you change the text again, because the JavaScript will find the max width of the text to be less than the dropodown's, so the width will not change.
Simple fix would be to pick a width for your Dropdownlist and set max and min lengths to your textbox values so you can control over the size of your submissions. Otherwise i could type in anything.
Ill get you back to 0 on your question and provide a solution.
Use CSS. On the select box set a width and even if the content in it is smaller it wont get smaller.
<select style="min-width:200px;" id="someUniqueIdentifier">
/* Your dynamicaly generated options*/
</select>
The most simple solution if I have read the question correctly would be to use the min-width property (developer.mozilla.org/en-US/docs/CSS/min-width) like so - select { min-width: 50px; width: auto; } - This would allow the width of the control to expand as needed but not to fall below the minimum width you defined. This could be defined on the :hover state selector, but would work just as well (and I would suggest) on the element itself. IE8+ support, no JavaScript required.
I'm trying to get the height of an initially hidden div element in Netscape and Firefox using javascript (it works fine in IE). I have tried using MyElement.scrollHeight, MyElement.offetHeight, MyElement.style.height and many different ways of setting the element initially visible, getting the height and then hiding it again. I keep getting a value of 0. Any thoughts?
Correct me if I'm wrong (Which I may be), but from doing some research, elements with display: none have no height.
To get the height, you would need to unhide them, get the height, then rehide them. Issues like this have popped up in the past like so:
jQuery: height()/width() and "display:none"
jQuery: Get height of hidden element in jQuery
(Both jQuery examples, but you get the point)
Hidden elements in Netscape is not accessible.
you can set that position with styling hole of div out of your screen. for example move it to -9999 on top left. then you can access that's attributes like height and width.
you can also visible that element and get your attribute and hide it again, but it is not usual because your element will be show a little bit of the second and user maybe feel jumping on screen.
you should position it by setting style to "absolute" and "top" to -9999px or more (depend of your project height) and then get your element height and width with DOM and anythings that you want ...
What I Want
To determine the height of the .results div that is accurate based on its CURRENT content.
Background
As I navigate through my website, the results div is updated with dynamic content based on searches, etc. I am able to get the height of the results div, but it's only the initial value that I can get.
Code for Updating the div
$results.unbind();
$results.empty();
$results.html(newContents);
What I've Tried
Note that I print out the values so I can check it in firebug.
var $results = $('.results'); /* Prints out: */
console.log($results.height()); /* 18 */
console.log($results[0].scrollHeight); /* 18 */
console.log($results[0].clientHeight); /* 18 */
console.log($results.css('height'); /* 18px */
console.log($results.attr('height'); /* undefined */
The height extends well past the bottom of the page, so 18px is definitely not accurate. How do I get the real value?
Possible Solution?
ryanulit helped me figure out that .height() SHOULD work properly for what I'm doing. So that led to me thinking that there's some problem with events being processed properly. There are many places in the application that return false rather than calling event.preventDefault(). The problem is that when you return false, it also calls event.stopPropagation() in addition to event.preventDefault().
Update
I didn't find anywhere with return false that seemed to affect height. However, I did find out that setting the height directly in the html with style="height:0px;" updates the height properly. I'm not sure what else to try, so I'm currently stumped...
Look into the .height() function of jquery.
Here's a jsfiddle to show it is actually changing: http://jsfiddle.net/EvybH/2
Update
The height: 0px; made me think so I tested in the fiddle and updated: http://jsfiddle.net/EvybH/3/.
If you set a specific height in your css, it looks like the .height() property will always return that value. Check the fiddle. You can set min-height: 18px if you want to give the div a default height and then allow it to expand.
As both the previous posters have said, .height() should be working, however in the case of it not working I believe calling
.height(currentElement.height).height()
will return a refreshed height (although very hacky and probably discouraged).
Edit: currentElement is the element with dynamic height