Infowindow flickering on mouseover

[leena-bhise]

I am using ui-gmap-google-map to implement map on my application. my code is below :

<ui-gmap-google-map center="{ latitude: 0, longitude: 0 }" zoom="3" id="scheduler-map" bounds='map.map.bounds' control="map.gmap">
<ui-gmap-markers ng-if="map.positions" events="markersEvents" models="map.positions" idKey="'p_id'" coords="'position'" options="'options'" click="closeClick; ">
<ui-gmap-window closeClick="closeClick" options="windowOpt" show="windowOpt.show" templateUrl="'pos-info.html'" templateParameter="windowParams"></ui-gmap-window>

template code

<div class='popup' ng-class="{'set-width': parameter.isDataPresent}">
  <h5>{{parameter.name}}</h5>
  <b ng-if='parameter.driver'>Driven by</b>
  <div>
   {{parameter.driver.display_name}}
 </div>
 <div class='data-msg' ng-if="parameter.isDataPresent">
   This vehicle may be inactive. We have not received an updated position location from it since    <b>{{parameter.createdAt | date: 'MMM dd HH:mm'}} ({{parameter.createdAt | timeAgo}})</b>
 </div>
</div>

css :
.set-width {
width: 100px;
}

Here I applied mouseover / mouseout events on marker to show infowindow. when I hover on marker infowindow flickered. As I noticed it is due to dynamic width (from set-width class).

Please see attached video : https://youtu.be/ag6m97rGrBA

Any suggestion on this.

Thanks in advance.

[nmccready]

You might want to look at ngShow or ngifs css animation stuff. That way you can hide the element and stretch it out. So make the element visible only when the width is finished being set in a set time.

[nmccready]

https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngIf

[leena-bhise]

@nmccready ngShow / ngIf are not useful there. Do you have any other sollution ?

[nmccready]

Try this, https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/stylesheets/gwin-size-fix.css#L4-L15

[nmccready]

Just make it wider then you need it. If that doesn't help your going to need to make an example and search around.

[leena-bhise]

@nmccready Thanks your solution worked.

[smiddela]

Removing ng-cloak from the below html worked for me.

`

`