Question

I am working with node JS and we built a chat which works perfect and now we are moving onto the CSS part of it.

Now the problem I’m having right now is that when we have multiple tabs, and we click on just one , all the tabs will move up.

This can be viewed in the images below. The red area is the div that the tabs are in showing that they should be able to be moved down with CSS

before

After click on 1 tab

After another click on a tab to show you that i have the jQuery part correct

This is a fixed div sitting at the bottom of the page

This code below is repeated for each tab but with different ids , tramsTalk , Calvin, srcc-test as shown in the image.

<div style="position:fixed;bottom:0;right:26px;background-color:red;">
    <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
        <div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div>
        <div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div>
        <div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div>
    </div>
</div>

I thought this would work and it still keeps the tabs at the top.

Just to restate :

jQuery is working fine, we toggle but moves tabs up that should still be pinned to the bottom. (I can click on them and they will then pull down their text boxes). I assume CSS is the problem, I am unsure.

SOLUTION

<style>
.wrappers > div {
   margin-top: 275px;
}

.active {
    height: 300px;
    background-color: white;
    margin-top: 0 !important;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$('#Calvin_chat').click(function(){
   alert('test');
   $(this).attr('class','active');
});});
</script>

Works like a charm!!!

Answer 1

Though you state that “This code below is repeated for each tab but with different ids” and give this:

<div style="position:fixed;bottom:0;right:26px;background-color:red;">
    <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
        <div id="tramsTalk_chat_header" class="chat_header"><p><i class="icon-chevron-up icon-white pull-right"></i>tramsTalk</p></div>
        <div class="overflow_chat" id="tramsTalk_chat_textarea"><hr style="margin-top:-8px;margin-bottom:1px;"></div>
        <div class="chat_textarea_holder" id="tramsTalk_msg_textarea_holder"><textarea class="chat_box" rows="3" id="tramsTalk_msg" ignoreesc="true" name="tramsTalk_chat_message" onkeyup="check(this,event);" style="resize: none; overflow-y: hidden; "></textarea></div>
    </div>
</div>

My guess is, based on what I see from your images and the behavior you state, that you really have this (I’ve eliminated the guts for purposes of illustration):

<div style="position:fixed;bottom:0;right:26px;background-color:red;">
    <div id="tramsTalk_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
    </div>
    <div id="sccr_test_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
    </div>
    <div id="Calvin_chat" style="background-color:white;position:relative;bottom:0px;width:275px;float:right">
    </div>
</div>

That is, the fixed positioned div is not repeated for each, but in fact wraps them all. If so, then the behavior you experience is what I would expect, because once one tab is enlarged, then the height of the fixed div expands and all the headings go up with it. You start with something like this (I narrowed width for purpose of illustration). You click and expand the height of one and get something like this. One way to perhaps solve it is to set an em unit height on the div’s and likewise with the expanded size, so that you can then control margin-top like this.

I’m assuming here that your fixed div is not really going to have a red background, but in fact is going to be transparent (that the red was for illustration). If that is not so, then you need to make each element individually a fixed position, but then you will not be able to float them.