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.
Related
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().
I am using ckeditor to edit my html text, here i want to restrict editable area in the ckeditor, i know how to give width and height for the ckeditor but i do not know how to give width and height for the ckeditor editing area.
Suppose if i give 700px width then user should enter the text only upto 700px, after that it should come to the next line.
I gave like below
CKEDITOR.replace( 'divedit', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
width: '700px',
height:'200px'
});
but it is showing scroll bar if the user types text beyond 700px.
Sounds like a strange requirement. I would try this:
Before saving get the editor contents
Insert into a preview div that has the exact same CSS as your requirements / target but no width
Get the width of the content with javascript
Check if width > 700, alert message the user that their content Sucks and don't save
Otherwise, save
Don't do this with every change event - it will murder your performance at some point.
BTW, I never use static width content in CKE, so I cannot see how this is ever a problem, but I guess you have different requirements or something. If this is to stop users from entering OOOOOOOOOOOOOOOOOOOOOOOOOOOOO... or such content that overflow from the box you are outputting content with, don't worry about it. Content such as that should be deleted or edited using other means and you can also use CSS to control overflows. Or you can validate word widths with a max chars per word limitation or something.
This looks like one of those things that should have a simple answer, however I could not find any solution for it...
I have a table that contains several select elements, which have some text labels in front, on the same line.
I want to maximize the width of the select until the end of the td element.
I cannot use fixed widths.
If I use width=100% then the select will push the label out on a different line. By default, the select width is equal to the width of the longest option.
Here is how the default works: http://goo.gl/KiSGcK
Ideally, this should work with select2 also, where the default width is set to the width of the first option.
I have tried wrapping the select and/or the label in divs, setting different css options (float, display inline, etc) with no success. Any ideas?
Try to set float: left; for your label and table also. Then set them with width in percent that total is 100%. Like this label(width:40%) and table(width:60% except the border).
Finally found a solution: use overflow: hidden.
Here it is: http://goo.gl/mXNRZN
I have an container element which is sort of a layout container for its children and based on some attributes I have to arrange children.
I need simple way to set outerHeight of an element, something like,
$(e).setOuterHeight(200);
jQuery's outerHeight does not set the height at all, indeed its a readonly method.
$(e).height(200); // this clips my element
In above method, I loose borders of input of type text.
My element's children are docked based on available space and some other criteria based on data that it holds, simple layouts like float,clear etc will not work because padding etc change dynamically based on sizes. I will finally end up using Table, even if I dont want to but have no choice, but anyway thanks for the help.
Now when element is sized to more then children then there is no problem, but sometimes container element may have lesser height then the children and that time, I need to increase the size.
function calculateSize(e){
var s = {
width: $(e).innerWidth(),
height: 0
};
var ae = new Enumerator(e.children);
while(ae.next()){
var child = ae.current();
// I have tried all alternatives
// for following lines
// child.clientHeight || child.offsetHeight
// $(child).outerHeight()
// $(child).innerHeight()
s.height += $(child).outerHeight();
}
if(s.height > $(e).height()){
$(e).height(s.height);
}
}
function layoutChildren(e){
....
/// for every child c
/// some steps before
var heightForChildren =
calculatedWithPadMarginBorder(availableHeight,c);
/// tried combinations
$(c).height(heightForChildren);
/// last statement fails for button
/// as button's padding cuts itself
/// removing padding in calculation
/// cuts other input elements !!
/// some steps after
....
}
I need some explanation of how to calculate runtime height/width including/excluding padding/margin/border etc and how to set it correctly so that I dont run into problems. I cant keep on trying all permutations combinations as I dont see a correct documentation even on jQuery website.
Fixed height calculations are fine, but this is kind of a dynamic element which resizes itself and arranges children in specific order.
Problem is there is no way to set outerHeight, when we set height/width of an element, the height/width is actually inner height/width without taking margin into consideration, while when we want to resize parent, we need outerHeight, but we cannot set back the outerHeight that easily.
My calculateSize and layoutChildren are two separate methods and two separate algorithms because parent will be resized to sum of all children's height. And then height is simply divided by no. of children stacked one above other. My calculation is perfect, but in my layoutChildren method I have "outerHeight" and "outerWidth" of element and have no idea on how to set it correctly by using jQuery or any other way.
.outerHeight( value )
version added: 1.8.0
you can use jQuery.outerHeight(value) to set the value of an element's outer height. Ex: $foo.outerHeight( 200 )
If you don't have a special requirement, a standard element by default sizes its height to match its children. If you style the to float:left or float:right its default width will then also be that to contain all its children.
Ok, this is strange but this is the Answer.
There are weird controls,
SELECT
BUTTON (INPUT[type=submit|reset|button])
WebKit Browsers
Padding and Border are considered as part of OuterWidth for all controls
Padding and Border must be added to Width as OuterWidth for all controls
Padding and Border are considered as part of InnerWidth for "weird controls"
Padding and Border must be subtracted from Width before setting the Width for all "non weird controls"
Non WebKit Browsers
Padding and Border are considered as part of OuterWidth for all non "weird controls"
Padding and Border must be added to Width as OuterWidth for all non "weird controls"
Padding and Border are considered as part of InnerWidth for all non "weird controls"
Padding and Border must be subtracted from Width before setting the Width for all "non weird controls"
I would be happy to help, but I simply do not understand your question.
In regards to the documentation of the dimensions methods of jQuery I found that http://api.jquery.com/category/css/ holds documentation on both innerWidth(), innerHeight(), outerWidth() and outerHeight().
I hope this helps, otherwise, try reading through your question, making it more obvious what you need the answer for.
I have a textfield in a grid in which I wish to turn off text wrapping, but display a tooltip with the full text if wrapping is required. So, how could I detect if a field needs to wrap?
I tried to query the field's length, but it was either in em or in px based on if the user resized it. How could I get the wrapping status?
An option to detect if the text wraps - create (with jQuery, for instance) an invisible span with the same font settings and white-space: nowrap, set it's text to the field's content and check if the span's width is bigger than the field's width (in pixels, obtained via width())
Working fiddle: http://jsfiddle.net/TR98y/1/
Perhaps you can check the height (via scrollHeight) of the text container. It should increase when things start wrapping.
The only other alternative I can think of is setting overflow-x:hidden and then dettecting the overflow somehow.