Responsywna wyszukiwarka - jak dynamicznie ustawić pozycję diva, tak żeby obrał pozycję innego?

Chodzi o to, że mam sobie wyszukiwarkę i po kliknięciu otwiera się input, który jest ustawiony na sztywno przez co przy mniejszych rozdzielczościach jak zmienia się wygląd strony wszystko się rozjeżdża jak na załączonym obrazku.

Moja propozycja rozwiązania wygląda tak:

<script type="text/javascript">
function searchPlacement(){
    var frontSearchQuery = $('#s2id_frontSearchQuery');
    var coord = frontSearchQuery.offset();
    var top = coord.top+'px !important';
    $('#select2-drop').css({
        position: 'absolute',
        top: top
    });
}
window.onload = searchPlacement;
window.onresize = searchPlacement;
</script>

Nie bardzo rozumiem, co tutaj źle robię.

Ja nie bardzo rozumiem o co chodzi w problemie. Dlaczego ten input wydaje się być innym elementem niż ta grafika pod spodem? Co to w ogóle znaczy "otwiera się input"?

Na milion procent podchodzisz do tematu od zupełnie złej strony, ale brak jest szerszego kontekstu Twojego problemu. Opisz to dokładniej.

Rozumiem, że searchPlacement ma ustawić odpowiednio okienko wyszukiwania. Pytanie czy okienko wyszukiwania nie jest umieszczone jeszcze w jakimś divie z parametrem position. Jeżeli tak to zamiast frontSearchQuery.offset(); użyj frontSearchQuery.position(); offset bierze współrzędne względem okna, a position względem rodzica. http://api.jquery.com/position/

<!-- To jest wyszukiwarka -->
<div class="text-input">
	<div id="s2id_frontSearchQuery" class="select2-container form-control pat-city select2-dropdown-open select2-container-active">
		<a class="select2-choice select2-default" tabindex="-1" onclick="return false;" href="javascript:void(0)">
			<span class="select2-chosen">Wpisz miasto</span>
		<abbr class="select2-search-choice-close"></abbr>
		<span class="select2-arrow">
			<b></b>
		</span>
	</a>
	<input id="s2id_autogen3" class="select2-focusser select2-offscreen" type="text" disabled="">
</div>
<input id="frontSearchQuery" class="form-control pat-city select2-offscreen" type="text" placeholder="Wpisz miasto" name="RealestateFormFrontSearch[query]" tabindex="-1">
</div>

<!-- to jest to coß co wyskakuje po kliknieciu, zeby wpisac miasto - najlepsze jest to, że znajduje sie to w prosto w body, a to wyżej już gdzieś tam w headerze -->

<div class="select2-drop select2-display-none frontDropDown select2-with-searchbox select2-drop-active" style="top: 324.5px; left: 360.467px; width: 129px; display: block;" id="select2-drop">
	<div class="select2-search">
		<input class="select2-input" type="text" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">
	</div>
	<ul class="select2-results">
		<li class="select2-no-results">Wpisz jeszcze 1 znak.</li>
	</ul>
</div>

Tak to wygląda dokładnie.

@kalar

Dzieki, już sprawdzam.

@Edit

Nie działa, nie mam pojęcia co tam jest nie tak

Wymyśliłem :) Ahh te !importanty