В данном случае при нажатии на чекбокс, кнопка "Применить" должна отображаться полностью.
Ставил overflow: visible;
а так же z-index:9999;
, но не пойму в чем проблема, почему она все равно показывается не полностью.
$(document).ready(function() {
var _history = [];
$('.ctf--b-filt-check-list :checkbox').on('change', function() {
var c = $(this).prop('checked');
var filterId = $(this).find('input:checked').context.id;
if (!c) {
delHistory(filterId);
if ($('.' + filterId + '').css('display') != 'none') {
$('.' + _history[0] + '').show(300);
}
$('.' + filterId + '').css('display', 'none');
} else {
_history.unshift(filterId);
$('.ctf--b-filt-check-list span').css('display', 'none');
$('.' + filterId + '').show(300);
}
});
function delHistory(elem) {
var index = _history.indexOf(elem);
if (index > -1) {
_history.splice(index, 1);
}
};
});
/* vertical scroll-bar */
.ctf--c-scroll { height:500px; overflow:hidden; position:relative; margin:10px -5px 10px 0; }
.ctf--b-filt-c-item .jspContainer { overflow:hidden; position:relative; }
.ctf--b-filt-c-item .jspPane { width:100% !important; margin-left:0 !important; position:absolute; top:0; left:0 !important; box-sizing:border-box; }
.ctf--b-filt-c-item .jspVerticalBar { right:0 !important; top:0; position:absolute; height:100%; width:9px; cursor:pointer; }
.ctf--b-filt-c-item .jspTrack { right:0 !important; width:9px; position:relative; background-color:#eaeaea; box-sizing:border-box; height:100%; border-radius:2px; }
.ctf--b-filt-c-item .jspDrag { width:7px !important; border-radius:3px; left:0; margin: 1px; top:0; position:absolute; cursor:pointer; background:#c6c6c6; }
.design {
margin-top:-17px;
margin-left:15px;
z-index:9999;
overflow:visible;
background-color: #ededed;
display: inline-block;
position: absolute;
padding:10px;
border: 1px solid #ededed;
border-radius: 15px;
visibility: visible;
}
.design::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #ededed transparent transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ctf--b-filt-c-body" style="display: block;">
<div class="ctf--b-wpr-scr ctf--c-scroll jspScrollable" tabindex="0" style="overflow: hidden; padding: 0px; width: 193px;">
<div class="jspContainer" style="width: 193px; height: 500px;"><div class="jspPane" style="padding: 0px; left: 0px; top: 0px; width: 180px;"><ul class="ctf--b-filt-check-list ">
<li>
<input type="checkbox" id="idchkk_2_1_2" checked="" value="13659">
<label for="idchkk_2_1_2">
<i></i>
BOSCH
</label>
<span style="display: none;" class="design idchkk_2_1_2"><button type="submit" class="ctf-b-btn-aply">Применить</button></span>
</li>
<li>
<input type="checkbox" id="idchkk_2_1_11" value="13760">
<label for="idchkk_2_1_11">
<i></i>
FURUKAWA BATTERY
</label>
<span style="display: none;" class="design idchkk_2_1_11"><button type="submit" class="ctf-b-btn-aply">Применить</button></span>
</li>
<li>
<input type="checkbox" id="idchkk_2_1_14" value="13823">
<label for="idchkk_2_1_14">
<i></i>
HANKOOK
</label>
<span style="display: none;" class="design idchkk_2_1_14"><button type="submit" class="ctf-b-btn-aply">Применить</button></span>
</li>
<li>
<input type="checkbox" id="idchkk_2_1_25" value="13727">
<label for="idchkk_2_1_25">
<i></i>
TAB POLAR
</label>
<span style="display: none;" class="design idchkk_2_1_25"><button type="submit" class="ctf-b-btn-aply">Применить</button></span>
</li>
<li>
<input type="checkbox" id="idchkk_2_1_26" value="13725">
<label for="idchkk_2_1_26">
<i></i>
TOPLA
</label>
<span style="display: none;" class="design idchkk_2_1_26"><button type="submit" class="ctf-b-btn-aply">Применить</button></span>
</li>
</ul></div>
</div></div></div>