拴系元件位置

我一直真棒插件玩耍：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

拴系元件位置

回答

相关问题