tether element position incorrect until viewport change

Question

I have been playing around with awesome plugin: tether

I had problems with bootstrap (v3) popovers when manually loading them, the popovers outside of the viewport would display at the bottom of the viewport in the incorrect position. So I decided to experiment with this plugin as an alternative.

I have been trying to use a basic tether option to validate one of my inputs in my form, the form has been made using laravel form builder. (form-group of inputs are the target elements).

PROBLEM:

But for some reason it seems to load to the left of the target element (in the incorrect position). When the viewport changes (page resize or scroll etc) then it updates to the right of the target element(in the correct position).

Im not sure why it does this, any ideas on how I can get this to load up in correct position?

EXAMPLE:

Page Load (incorrect position):

Viewport Change (correct position):

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',
            });
   });
}

score 1 · Answer 1 · answered Nov 16 '16 at 12:11

Well no suggestions on how to solve this issue... so I finally sovled this by using another plugin that uses tether as a depedancy. This plugin was called drop.js and is perfect for the requirements needed. I changed the function to include this instead of 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'
        });

tether element position incorrect until viewport change

1 Answers1