CSS scroll absolute vs relative

Question

The issue is documented in this JSFiddle:

http://jsfiddle.net/sawaira/j62309fx/39/

Stabilizing iteration (90% done)

    <div style="height:100%; width:300px;float:right;border: 2px solid #0094ff;border-radius:5px">
        <div style="height:100%; width:100%;">
            <table style="width:100%;">
                <tr>
                    <td colspan="4">
                        <div class="containerChart2">
                            <div class="headerChartControl">
                                <span>My Team(s):</span>
                            </div>
                            <div id="filterHolder1" class="listControl">
                                 <form id="formUserListObject">
                                     <input type="checkbox" name="userSelection" id="{{id}}" onchange="checkBoxSelected(id,false)" class="css-checkbox"/>
    <label for="{{id}}" class="css-label">
        {{userName}}
    </label>

</form>
                            </div>
                        </div>
                    </td>
                </tr>

                      <tr>
                    <td colspan="4">
                        <div class="containerChart2">
                            <div class="headerChartControl">
                                <span>Find Other Team(s):</span>
                            </div>

                            <div class="contentSearch">
                                <!-- This is the HTML element that will be used to render the KeyLines component -->
                                <form id="formSearch" class="formSearch">
                                    <input type="search" id="searchBox" />
                                </form>

                                <!--label id="headervalue2">Search Results:</label-->
                                <div id="filterHolder2" class="listControl"></div>
                            </div>
                        </div>
                    </td>
                </tr>


                    <td colspan="4">
                               <div class="headerChartControl">

                                       <input type="button" onclick="document.getElementById('loading-image').style.display ='block'" value="Show"/>

<input type="button" onclick="document.getElementById('loading-image').style.display ='none'" value="Hide"/>
                            </div>

                        </td>
                    </tr>
                </table>
            </div>
 </div>
</div>

#formUserListObject {
        font-size: x-small;
    }

    #tab0 {
        top: 50px;
    }

    #page {
        display: none;
    }

    #loading-image {
        position:absolute;
        top: 50%;     
        left:50%;            
        z-index:1;
        font-size: 20px;
        color: red;


    }

    .overallDiv {
        height: 100%;
        width: 100%;
        background-color: #ff6a00;
    }

    .myDiv {
        height: 100%;
        width: 100%;
        background-color: #b6ff00;
    }

    .formClass {
    }

    .listControl {
        padding-top: 5px;
        padding-right: 15px;
        padding-bottom: 5px;
        padding-left: 15px;
        border: 2px solid #0094ff;
        height: 100px;
        overflow-y: scroll;
    }

    .paddingControl {
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-left: 10px;
    }

    .slider {
        padding-top: 5px;
        padding-right: 15px;
        padding-bottom: 5px;
        padding-left: 15px;
        background-color: #00ff90;
    }

    input[type=checkbox].css-checkbox {
        position:absolute;
        z-index: -1000;
        left: -1000px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px;
        width: 1px;
        padding: 0;
        margin: -1px;
        border: 0;
    }

    input[type=checkbox].css-checkbox + label.css-label {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 0;
        font-family: Arial;
        font-size: 10px;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-label {
        background-position: 0 -15px;
    }

    label.css-label {
        background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_845137eccd6f9ac2355055adf283a248.png);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    input[type=checkbox].css-checkbox + label.css-labelMinus {
        padding-left: 20px;
        height: 15px;
        display: inline-block;
        line-height: 15px;
        background-repeat: no-repeat;
        background-position: 0 -15px;
        font-family: Arial;
        font-size: 10px;
        cursor: pointer;
    }

    input[type=checkbox].css-checkbox:checked + label.css-labelMinus {
        background-position: 0 -15px;
    }

    label.css-labelMinus {
        background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_845137eccd6f9ac2355055adf283a248.png);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .headerChartControl {
        background-color: #9ed1f6;
        cursor: pointer;
        font-family: Arial;
        font-size: 12px;
        font-weight: bold;
        width: 100%;
    }


    .contentSearch {
        width: 100%;
    }

    .listControl {
        border: 1px solid #0094ff;
        height: 100px;
        overflow-y: scroll;
    }

    .searchText {
        font-family: Arial;
        font-size: 10px;
    }

    .formSearch {

        width: 100%;
        display: inline-block;
        padding-bottom: 2px;
    }

    input[type="search"] {
        background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAIVBMVEW/v7+/v78AAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v79QUkolAAAAC3RSTlOLYAAJeoMjRhpOcbsbtd4AAABJSURBVHjaVc1JDsAgDATB9uAF8v8Hx0QcSN9KssZI5eClDj18PRsFlmlQDcfUGd6A3EgYP1xncQ+sa5qYOk9jRQt1Y0izhU5bL2o2AW3ZQKeJAAAAAElFTkSuQmCC) 10px 6px no-repeat;
        height: 20px;
        border: 1px solid #0094ff;
        width: 100%;
    }


input[type="search"] {
  -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
 -webkit-appearance: textfield;
}

    input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: searchfield-cancel-button;
    }
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: searchfield-decoration;
    }

1) If you click on the "checkbox" on the very right, you will notice the div scrolls to the left. I know this is happening because I have "position:absolute" in the style for the checkbox.

However, if I remove the position attribute altogether, then in IE - I am seeing a "." in front of the "+" sign of the checkbox.

If I make the position attribute: "relative", I get desired behavior in IE but in Chrome it still scrolls out.

Can someone please let me know what should I do?

Answer 1

By what your code looks like, it seems you are trying to hide the checkbox and use it's label instead. If this is the case, then you are going the long way around.

Instead of:

input[type=checkbox].css-checkbox {
    position:absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
}

Simply use:

input[type=checkbox].css-checkbox {
    display: none;
}

There is no reason for the checkbox to be viewable at all.

A spot I use this method: http://codepen.io/jacksonrk/pen/myqLOE