拴系元件位置

我一直真棒插件玩耍：tether 拴系元件位置

我曾與引導（V3）popovers問題時手動加載它們，視口之外popovers將顯示在底部視口位置不正確。所以我決定試用這個插件作爲替代。

我一直在嘗試使用基本的繫繩選項來驗證我的輸入之一，我的表單中，窗體已經使用laravel表單構建器。（輸入的form-group是目標元素）。

問題：

但由於某種原因，它似乎加載到目標元素的左側（在不正確的位置）。當視口改變時（頁面大小調整或滾動等），它將更新到目標元素的右側（在正確的位置）。

我不知道它爲什麼這樣做，關於如何讓它加載到正確位置的任何想法？

例：

頁面加載（不正確的位置）：

視口更改（正確位置）：

HTML：

{!! Form::model($article = new \App\Article, ['id' => 'form-article', 'route' =>'articles.store', 'class' => 'row']) !!} 

<div class="row"> 
    <div class="form-group col-lg-12 title"> 
    {!! Form::text('title', null, ['id' => 'title', 'class' => 'form-control', 'placeholder' => 'Title']) !!} 
    </div> 
</div> 
<div class="row"> 
    <div class="form-group col-lg-12 body"> 
     {!! Form::textarea('body', null, ['id' => 'body', 'class' => 'form-control', 'placeholder' => 'Body']) !!} 
    </div> 
</div> 

{!! Form::close() !!} 

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var errors = ({!! json_encode($errors->toArray()) !!}); 
     var form = ({!! json_encode($form) !!}); 
     console.log(errors); 
     outputValidationPopovers(form, errors); 
    }); 
</script>

JAVASCRIPT：

function outputValidationPopovers(formId, errors) 
{ 
    $.each(errors, function (eKey, messages) 
    { 
     var $newPopover = $('<div class="tether-'+eKey+'">stuff</div>'); 
     $newPopover.css('z-index', '1030').css('background-color', 'red'); 
     $(formId).append($newPopover); 

     new Tether(
      { 
       element: '.tether-'+ eKey, 
       target: '.'+eKey, 
       attachment: 'middle right', 
       targetAttachment: 'middle right', 
      }); 
    }); 
}

來源

2016-11-08 Orbitall

那麼如何解決這個問題......沒有任何建議，所以我最後用使用繫繩作爲depedancy另一個插件sovled這一點。該插件名爲drop.js，非常適合所需的要求。我改變了這個函數來包含這個，而不是tether initilisation。

 var drop = new Drop({ 

      target: $input.closest('.form-group')[0], 
      content: messages[0], 
      classes: 'drop-theme-arrows-bounce drop-danger drop-form-'+formId+' target-' + eKey + ' ' + popoverClass, 
      position: 'right middle', 
      openOn: 'always' 
     });

來源

2016-11-16 12:11:57 Orbitall

拴系元件位置

回答

相關問題