why does changing of class of a element distorts the view?

Question

I am trying to change a class of a element and my view gets distorted? How do I solve it.

I have created the fiddle for the same Jsfiddle

Issue Description:

I have a custom textbox. I have a reference value at top left corner of it. If I enter value greater or less than the reference value , I show a box asking for reason.

It works perfectly fine, but when I try to add some extra functionality , like changing the color of the div in right top corner of textbox by changing the class of the div , the view is distorted and not as it was expected.

In the fiddle I can commented the code in javascript section at line 73,74,77,78

function changeClassOfCommentToRed(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
//$("#"+divId).removeClass();
//$("#"+divId).addClass("commentCornerGreen");
}

if I uncomment the above line for extra functionality , I get a distorted view as in following image

Answer 1

Try to specify which class to remove in your removeClass :

removeClass('classToRemove');

Answer 2

If I get what question correctly. I think this commentCornerRed class got width: 0 and height: 0. you can have the same properties as .arrow_box

.commentCornerRed {
     position: absolute;
    width: 0;
    height: 0; 
    display: block;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #ff0000 transparent transparent;
    padding-left: 36px;
    cursor: pointer;
}

You can make it like this.

.commentCornerRed {
    position: absolute;
    background: #bcb476;
    border: 1px solid #08090a;
    z-index: 1;
    margin-left: 50px;
    margin-top: -40px;
}

Answer 3

You only need to remove the classes you want to change:

function changeClassOfCommentToRed(divId){
    $("#"+divId).removeClass("commentCornerGreen commentCornerRed");
    $("#"+divId).addClass("commentCornerRed");
}
function changeClassOfCommentToGreen(divId){
    $("#"+divId).removeClass("commentCornerGreen commentCornerRed");
    $("#"+divId).addClass("commentCornerGreen");
}

And in your CSS you need to address your arrow pseudo element not the element itself:

.commentCornerRed:after {
    ...
}
.commentCornerGreen:after {
    ...
}

With this changes, only the color of the arrows is changed, not the color of the box.

Answer 4

I made a silly mistake. I was passing the wrong id for class name. Got the desired result by passing the right id at line 85 and 87 in javascript section.

changing from

function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
    changeClassOfCommentToGreen(returnIdPrefix(event)+"r1");
    }else{
    changeClassOfCommentToRed(returnIdPrefix(event)+"r1");
    }
}

to

function handleCommentBox(event){
if(checkIfReasonSelected(returnIdPrefix(event)+"r1")){
    changeClassOfCommentToGreen(returnIdPrefix(event)+"c1");
    }else{
    changeClassOfCommentToRed(returnIdPrefix(event)+"c1");
    }
}

solved the problem. Thanks people for helping.