div changes its margins when select option is changed

Question

$('#seltags').change(function() {
  var obj = $('#' + $(this).val());
  $('.txtags').hide();
  obj.show();
});

.seltags {
  display: block;
  padding: 1px 7px;
  width: 100%;
}

.txtags {
  display: block;
  width: 100%;
  padding: 5px 9px;
  outline: none;
  border: 1px solid #999;
  border-radius: 9px;
  resize: none;
  overflow-y: scroll;
  margin-top: 13px;
  text-transform: uppercase;
}

.tagsimg {
  display: none;
}

.divbottom {
  height: 14px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
  <option value='tagsart'>TAGS ARTICLES</option>
  <option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

divbottom gets a top margin (about five pixels) when seltags is changed to second option, and lose that margin when it is returned to the first option.

Can anyone help me what's wrong here?

Thank you.

score 0 · Answer 1 · answered Apr 25 '18 at 18:12

The margin appears because when the second option is chosen, the #tagsimg element gets display: inline-block inline style.
In order to remove this margin, you need to add vertical-align: middle to the styles of the #tagsimg element or find out why the display: inline-block is added and change that.
You can read why jQuery does it, and how to avoid it in this StackOverflow question: jQuery .show() adds style="display:inline-block" to elements

score 0 · Answer 2 · answered Apr 25 '18 at 18:14

it's not a margin, it's the textarea ( .txtags ) that you show and hide that pushes it down a bit necause when shown it gets display:inline-block ,

add .obj.show().css({'display': 'block'}); so both textareas behave the same

$('#seltags').change(function(){
 var obj = $('#' + $(this).val());
 $('.txtags').hide();
 obj.show().css({'display': 'block'});
});

.seltags{
 display:block;
 padding:1px 7px;
 width:100%;
}

.txtags{
 display:block;
 width:100%;
 padding:5px 9px;
 outline:none;
 border:1px solid #999;
 border-radius:9px;
 resize:none;
 overflow-y:scroll;
 margin-top:13px;
 text-transform:uppercase;
}

.tagsimg{
 display:none;
}

.divbottom{
height:14px;
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

That is fun how your answer will fix it and keeps the space and mine doesn't keeps the space... — DontVoteMeDown, Apr 25 '18 at 18:15
@DontVoteMeDown i actually edited the answer right before your comment .. same approach as yours — Taki, Apr 25 '18 at 18:16

score 0 · Answer 3 · answered Apr 25 '18 at 18:14

I'm not sure why, but the div.divbottom is not getting any margin or padding at all. The problem is that when you show the .tagsimg it is getting display: inline-block instead of just block which is the initial state of .txtags. Making .tagsimg be hidden by jQuery instead of starting with display:none makes jQuery change it to display:inline-block when shown which fix it.

$('#seltags').change(function(){
 var obj = $('#' + $(this).val());
 $('.txtags').hide();
 obj.show();
});

$('.tagsimg').hide();

.seltags{
 display:block;
 padding:1px 7px;
 width:100%;
}

.txtags{
 display:block;
 width:100%;
 padding:5px 9px;
 outline:none;
 border:1px solid #999;
 border-radius:9px;
 resize:none;
 overflow-y:scroll;
 margin-top:13px;
 text-transform:uppercase;
}

.tagsimg{
 display:block;
}

.divbottom{
height:14px;
background:gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

how do you know that hidden textarea becomes `inline-block`? It is declared as `block` in css. — , Apr 25 '18 at 18:18
@puerto I'm almost sure that when you execute `show()`, jQuery gets the value that was once declared in css and uses it. If it was already `display:none`, jQuery applies `inline-block` as default. — DontVoteMeDown, Apr 25 '18 at 18:22

score 0 · Answer 4 · answered Apr 25 '18 at 18:15

0

both textareas should be either inline-block or block its the mixture of two which is causing the behavior

answered Apr 25 '18 at 18:15

ashish singh

6,526
2
15
35

score 0 · Accepted Answer · answered Apr 25 '18 at 18:16

The margin appears because when the select box is changed and the second option is chosen, the text area that was hidden now gets display: inline-block; to show it, and the offset from being hidden causes the margin jump.

Try adding vertical-align: middle; to the styles of the .txtags class element.

$('#seltags').change(function() {
  var obj = $('#' + $(this).val());
  $('.txtags').hide();
  obj.show();
});

.seltags {
  display: inline-block;
  padding: 1px 7px;
  width: 100%;
}

.txtags {
  display: inline-block;
  width: 100%;
  padding: 5px 9px;
  outline: none;
  border: 1px solid #999;
  border-radius: 9px;
  resize: none;
  overflow-y: scroll;
  margin-top: 13px;
  text-transform: uppercase;
  vertical-align: middle;
}

.tagsimg {
  display: none;
}

.divbottom {
  height: 14px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
  <option value='tagsart'>TAGS ARTICLES</option>
  <option value='tagsimg'>TAGS IMAGES</option>
</select>

<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>

<div class='divbottom'></div>

how do you know that hidden textarea becomes `inline-block`? It is declared as `block` in css. — , Apr 25 '18 at 18:18
Because jQuery object.show() sets the css style on the tag to "display: inline-block". You can watch this occur if you inspect the element in the DOM while selecting options. — Woodrow, Apr 25 '18 at 18:19
Pls, how can I exactly inspect this. In source code, in consola... where? — , Apr 25 '18 at 18:21
If you're using Chrome, right click on the visible textarea, then select "Inspect Element" from the context menu. You should then see the dom elements. Try selecting the second option, and you should see the "display" style toggle on your textareas. — Woodrow, Apr 25 '18 at 18:23

Takit Isy · Answer 6 · 2018-04-25T18:29:42.777

Your 1st textarea is displayed as a block.
But the trick here is that when you make your 2nd textarea appear, it appears as an inline-block.

I suggest you to use inline-block or delete the property.
Here is a working snippet with some other comments:

// Optimized function
$('#seltags').change(function() {
  $('.txtags').hide();
  $('#' + $(this).val()).show();
});

.seltags {
  display: block;
  padding: 1px 7px;
  width: 100%;
}

.txtags {
  /* display: inline-block; /* Here is what I changed! */
  width: 100%;
  padding: 5px 9px;
  outline: none;
  border: 1px solid #999;
  border-radius: 9px;
  resize: none;
  overflow-y: scroll;
  margin-top: 13px;
  text-transform: uppercase;
}

.hidden { /* Changed name */
  display: none;
}

.divbottom {
  height: 14px;
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
  <option value='tagsart'>TAGS ARTICLES</option>
  <option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags hidden' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>

On a side note, I don't understand why your 2nd textarea appear as inline-block.

Here is an extract of show() documentation:
“The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.” (link: http://api.jquery.com/show/)

is there any jquery or css address to complain about this? – Apr 25 '18 at 18:56 — , Apr 25 '18 at 18:56

div changes its margins when select option is changed

6 Answers6