0

В данном случае при нажатии на чекбокс, кнопка "Применить" должна отображаться полностью.

Ставил 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>

2 ответа 2

3

ты же сам ограничил размер блока, в котором у тебя все выводится

style="width: 193px;" 

1) убрать ширину блока или ограничить ее через свойства min-height, max-height

2) я приводил пример (https://jsfiddle.net/j1wxwjfb/) - сделай одну кнопку "применить", чтобы она была не дочерней для твоего блока с заданной шириной и размещать ее динамически

3) с помощью jquery просто увеличивать размер твоего блока в зависимости от размера кнопки

1 и 2 методы мне кажутся наиболее предпочтительными

8
  • на счет первого варианта: тогда блок будет увеличиваться/уменьшаться, в зависимости от ширины? на счет второго варианта: хотел воспользоваться вашим вариантом, но не кнопка отображалась где-то в стороне, не смог привязать ее к чекбоксу. это можно исправить?
    – evans
    29 ноя 2017 в 12:09
  • 1
    на счет первого варианта - именно так - когда невидимый элемент станет видимым - ширина блока увеличится на счёт второго варианта - вы можете оформить свой код в jsfiddle.net например или в виде файлика куда-нибудь выложить, я бы тогда протестировал и попробовал бы найти решение
    – Zhihar
    29 ноя 2017 в 12:14
  • Приблизительно так jsfiddle.net/j1wxwjfb/1 по факту получилось
    – evans
    29 ноя 2017 в 12:37
  • 1
    Дмитрий, посмотри jsfiddle.net/j1wxwjfb/2 Во-первых у тебя было 2 элемента с одинаковым ID - это не очень хорошо, во-вторых у тебя очень много тегов, лишних тегов - попробуй подчистить, например <div><span>TITLE</span></div> - тут можно одним div обойтись и определить в нем нужные стили. Теперь по самому примеру - я центрую кнопку по вертикали, для этого мне надо знать размер кнопки (я его в стиле установил), но поскольку кнопка может быть невидимой, а в формуле ее высота присутствует, то я его прописываю вручную (не стал искать можно ли получать актуальные размеры невидимых)
    – Zhihar
    29 ноя 2017 в 13:11
  • 1
    а выравниваю по горизонтали кнопку просто зная ширину твоего блока (ты его сам написал) хотя понимаю, что это не очень хорошо и лучше все делать автоматически, но для этого предварительно лучше теги подчистить - уж очень их много
    – Zhihar
    29 ноя 2017 в 13:12
1

Уважаемый, у вас в html в блоке с классом ctf--b-wpr-scr ctf--c-scroll jspScrollable стоит фиксированная ширина 193px.

Увеличьте ее и кнопка появится полностью)

2
  • а поверх блока реально сделать?
    – evans
    29 ноя 2017 в 11:49
  • 1
    нереально - при одном размере дочерний элемент никогда не будет выше родительского, как бы ты ни игрался с z-index (z-index вообще хитро работает), максимом можно position: fixed сделать, но тогда он закрепится на экране и при движении (прокрутке) страницы твоя кнопка останется на месте, а список убежит
    – Zhihar
    29 ноя 2017 в 11:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.