Saya memiliki div kanan mengambang di dalam templat yang dimuat dengan benar saat pemuatan halaman awal atau penyegaran paksa.
Namun, pada perubahan status (menggunakan ui-router) lalu kembali (yaitu menukar template), div akan terbentur ke bawah, dengan apa yang tampak seperti div di sebelah kirinya tanpa float.
Apakah saya salah menerapkan CSS?
Cuplikan layar terlampir dari kedua skenario. Gambar pertama adalah pemuatan awal, kedua adalah halaman (template NG) yang dikembalikan setelah keluar melalui link di halaman. Tautan juga merupakan templat. Satu-satunya alasan saya menyebutkan NG adalah karena saya mencoba membuat ulang di Plunker dengan konvensional tautan href, dan gagal mendapatkan kesalahan.
HTML
<div class="locate-change">
<input type="text" color="red" placeholder="ENTER LOCATION" class="input1" />
<a ng-click="locateme()" href="/id" class="locate2">LOCATE</a>
</div>
CSS
.locate-change {
float:right;
height: 35px;
padding-left: 10px;
width: 300px;
}
.input1 {
display:inline-block;
border: 1px solid red;
background: #000000;
text-transform: uppercase;
font-family:'DINLightRegular', Helvetica, Arial, sans-serif;
font-size: 1em;
margin: 0;
padding: 4px;
outline: none;
width:160px;
}
.locate2 {
float: right;
padding-left:35px;
background: url(../../images/locate.png);
height: 30px;
background-size: cover;
background-size: 30px;
background-repeat:no-repeat;
width:65px;
}
Saya dapat membuat ulang plunker sudutjs jika perlu.
EDIT beberapa catatan:
- ini hanya terjadi di Chrome, bukan di FF atau Safari
- div input 'Ubah Kota' menggunakan tipe Angular UI Bootstrap yang sepertinya menambahkan div kelas .dropdown-menu - tetapi memiliki dimensi nol (lihat tangkapan layar di bawah)
- kode div hasil dropdown typeahead yang kosong muncul dan identik dalam keadaan benar dan salah
