ฉันมี div ที่ถูกต้องภายในเทมเพลตที่โหลดอย่างถูกต้องเมื่อโหลดหน้าเริ่มต้นหรือรีเฟรชอย่างหนัก
อย่างไรก็ตามในการเปลี่ยนแปลงสถานะ (โดยใช้ ui-router) จากนั้นส่งคืน (เช่น การสลับเทมเพลตออก) div จะถูกกระแทกลง โดยสิ่งที่ดูเหมือน div ทางด้านซ้ายโดยไม่มีการลอย
ฉันใช้ CSS ไม่ถูกต้องหรือไม่?
ภาพหน้าจอที่แนบมาของทั้งสองสถานการณ์ ภาพแรกคือการโหลดครั้งแรก ภาพที่สองคือหน้า (เทมเพลต NG) ที่ส่งคืนหลังจากออกผ่านลิงก์บนหน้า ลิงค์ก็เป็นเทมเพลตเช่นกัน เหตุผลเดียวที่ฉันพูดถึง NG ก็คือฉันพยายามสร้างใหม่ใน Plunker ด้วยแบบธรรมดา ลิงก์ href และไม่ได้รับข้อผิดพลาด
HTML
<div class="locate-change">
<input type="text" color="red" placeholder="ENTER LOCATION" class="input1" />
<a ng-click="locateme()" href="/th" class="locate2">LOCATE</a>
</div>
ซีเอสเอส
.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;
}
ฉันสามารถสร้าง plunker เชิงมุม js ขึ้นมาใหม่ได้หากจำเป็น
แก้ไข หมายเหตุสองสามข้อ:
- สิ่งนี้เกิดขึ้นใน Chrome เท่านั้น ไม่ใช่ใน FF หรือ Safari
- div อินพุต 'เปลี่ยนเมือง' ใช้ Angular UI Bootstrap typeahead ซึ่งดูเหมือนว่าจะเพิ่ม .dropdown-menu class div - แต่มีขนาดเป็นศูนย์ (ดูภาพหน้าจอด้านล่าง)
- รหัส div ผลลัพธ์แบบเลื่อนลง typeahead ที่ว่างเปล่าปรากฏขึ้นและเหมือนกันทั้งในสถานะที่ถูกต้องและไม่ถูกต้อง
