всплывающее окно, содержащее проблемы с ручкой ввода (bootsrap-4) - PullRequest
Новая
       17

всплывающее окно, содержащее проблемы с ручкой ввода (bootsrap-4)

0 голосов
/ 06 июля 2019

Я пытаюсь поместить ручку ввода типа набора внутри поповера, но ничего не получается

  1. Мне удалось показать элемент управления, только поместив скрипт внутри элемента div "popover-content", еслиЯ пытаюсь вытащить сценарий из этого div, который перестает показывать элемент управления.
  2. поповер изменяет распределение содержимого в зависимости от размера, назначенного для элемента управления knob: с размерами до 125 пикселей для ширины данных и data-высота распределение пейзажное, иначе портрет
  3. работает только с селектором $('[data-plugin = "knob"]'), с использованием селектора id $("#myKnobInput") перестает работать

'' '

          <h4 id="E-33" class="text-muted font-light">1-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <span class ="text-danger m-l-15">
            <a class="epop waves-effect waves-dark" href="javascript:void(0)" rel="popover"> 18%</a></span></h4> 

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus placeat, ea quasi tenetur, ducimus minus repellendus molestias assumenda. Quisquam laborum et accusantium debitis, magni eveniet cum iusto temporibus doloremque optio!
          </p>


          <h4 id="E-35" class="text-muted font-light">1-3 Eligendi dignissimos expedita aspernatur voluptas veniam!
            <span class ="text-danger m-l-15">
            <a class="epop" href="javascript:void(0)" rel="popover"> 27%</a></span></h4> 

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus placeat, ea quasi tenetur, ducimus minus repellendus molestias assumenda. Quisquam laborum et accusantium debitis, magni eveniet cum iusto temporibus doloremque optio!</p>


          <div id="popover-content" style="display:none">                    


              <input id="myKnonInput" data-plugin="knob" data-width="125" data-height="125" data-min="0" data-max="100" data-fgColor="#f62d51" data-displayPrevious=true
              data-angleOffset=-125 data-angleArc=250 value="56" />


              <script>  // code oly works in this position
                $(document).ready(function(){
                    $('[data-plugin="knob"]').knob();                                  

                      var popOverSettings = {
                        placement: 'bottom',
                        container: 'body',
                        animated: true,
                        html: true,
                        selector: '[rel="popover"]', //Sepcify the selector here
                        content: function () {
                            return $('#popover-content').html();
                        }
                  }

                $('body').popover(popOverSettings);                 

                });

              </script>

          </div>  
        </div>'''

Мне нужно отрегулировать размер поповера в соответствии с размером ручки

...