Clever Geek Handbook

Jquery code causing unwanted space

I have a problem with the parameters and answers I have. If I select options that contain multiple buttons output, for example if I select option 20 it displays 20 buttons, the problem I get is the space drops a little at the bottom of the table column. This only happens when the option is changed and then the space remains all over. My question is how to simply stop the space at the bottom of the table column from increasing when the parameter changes?

I found out that the code causing this problem is this:

  //THE ISSUE IS HERE

var _x = $(e.currentTarget);
var _y = _x.closest('td.extratd');
var _z = _y.prev();

$('textarea', _z).css('height', '').height(_z.innerHeight());

//ISSUE ABOVE

Now what the code above does is allow the textbox inside the column to Question

fill the entire table cell when the textarea is added or if the parameter changes. So I need the code above, but what the code above also does is creating unnecessary space at the bottom of the table row, so I need help sorting the unwanted space.

I have a jsfiddle you can use to see what's going on and also includes the code above: http://jsfiddle.net/aND4g/61/

To use the violin, follow these steps:

  • When you open the fiddle in the top content type in the question text box and then click Open Grid

    and select the 3

    or button 4

    .

  • When you have done step 1, click the button Add Question

    to add the above data to the table below

  • Now IN CLOSE ROW, click Open Grid

    and choose another option from what you chose first. You will see that it creates unwanted space at the bottom of the table row.

+3


source to share


1 answer


This is because you are using innerHeight()

which includes padding-top

and padding-bottom

.

Get the current computed height for the first element in a set of matched elements, including padding but not border.

  - innerHeight()

API documentation

Since they are equal 1em

, you get 2em

more height than you want. So I implemented a quick and hacky fix:



// Get the padding of the cell
var ignoreHeight = parseInt(_z.css("padding-top")) + parseInt(_z.css("padding-bottom"));
// Set the height without that padding
$('textarea', _z).css('height', '').height(_z.innerHeight() - ignoreHeight);

jsFiddle

Basically, I just added padding to the variable and subtracted that from the actual height you are setting. Perhaps the best way to "ignore" this addition is with a more convenient method, but it looks like this will work for your case.

+2


source






More articles:


All Articles