javascript - tether element position incorrect until viewport change -
i have been playing around awesome plugin: tether
i had problems bootstrap (v3) popovers when manually loading them, popovers outside of viewport display @ bottom of viewport in incorrect position. decided experiment plugin alternative.
i have been trying use basic tether option validate 1 of inputs in form, form has been made using laravel form builder. (form-group
of inputs target elements).
problem:
but reason seems load left of target element (in incorrect position). when viewport changes (page resize or scroll etc) updates right of target element(in correct position).
im not sure why this, ideas on how can load 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', }); }); }
well no suggestions on how solve issue... sovled using plugin uses tether depedancy. plugin called drop.js , perfect requirements needed. changed function include 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' });
Comments
Post a Comment