CSS scrolling is absolute relative to relative
The problem is described in this JSFiddle:
http://jsfiddle.net/sawaira/j62309fx/39/
Iteration stabilization (90% complete)
<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 "right" checkbox, you will see the rolls of div on the left. I know this is happening because I have "position: absolute" style for the checkbox.
However, if I remove the position attribute entirely, then in IE - I see "." in front of the "+" sign of this checkbox.
If I create a position: "relative" attribute I get the desired behavior in IE, but it still scrolls in Chrome.
Can someone please let me know what to do?
source to share
From what your code looks like, it seems like you are trying to hide this checkbox and use it instead. If so, then you are on a long road.
Instead:
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;
}
Just use:
input[type=checkbox].css-checkbox {
display: none;
}
There is no reason for this flag to be viewable.
I am using this method: http://codepen.io/jacksonrk/pen/myqLOE
source to share