Ich habe einen Suchbereich am Anfang einer Homepage, die ich versuche zu bauen. Der Suchbereich besteht aus einer Texteingabe und zwei Dropdown-Feldern sowie einem Absenden- oder "Suchen" -Button.Stapelproblem durch CSS-Animation verursacht
Ich habe versucht, eine Fade-In-Animation von animate.css zu dem Wordpress-Widget hinzuzufügen, das ich verwende, was funktionierte. Die Dropdown-Boxen sind nun jedoch vom darunterliegenden Container-Div überlappt.
Sie können die Version mit der Animation sehen here
und here ist eine ältere Version ohne die Animation hinzugefügt, wo die Drop-Down-Boxen erscheinen, wie sie sollten.
Kennt jemand irgendeine Art, die Animation beizubehalten, ohne die Stapelreihenfolge oder eine Korrektur zu beeinflussen?
Danke! Einige der relevanten Quelle/Styling Code
unterhalb
<form class="job_search_form" action="http://dev-pantri.pantheonsite.io/profiles/" method="GET">
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords" id="search_keywords" placeholder="What are you looking for?" />
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location" id="search_location" placeholder="Location" />
</div>
<div class="search_categories">
<label for="search_categories">Category</label>
<select name='search_categories[]' id='search_categories' class='job-manager-category-dropdown ' data-placeholder='Choose a category…' data-no_results_text='No results match' data-multiple_text='Select Some Options'>
<option value="">All categories</option>
<option class="level-0" value="44">Arts and Entertainment</option>
<option class="level-1" value="53">Nightclubs</option>
<option class="level-0" value="59">Bars</option>
<option class="level-0" value="61">Lodging</option>
<option class="level-1" value="62">Hotels</option>
<option class="level-0" value="63">Nightlife</option>
<option class="level-0" value="58">Outdoors</option>
<option class="level-0" value="54">Restaurants</option>
</select>
</div>
<div class="filter_wide filter_by_tag">Filter by tag: <span class="filter_by_tag_cloud"></span></div><select name='search_region' id='search_region' class='search_region' >
<option value='0'>All Regions</option>
<option class="level-0" value="55">Annex</option>
<option class="level-0" value="56">Beaconsfield Village</option>
<option class="level-0" value="57">Bloordale Village</option>
<option class="level-0" value="40">Casa Loma</option>
<option class="level-0" value="39">Corktown</option>
<option class="level-0" value="22">Downtown Core</option>
<option class="level-0" value="23">Dufferin Grove</option>
<option class="level-0" value="24">Entertainment District</option>
<option class="level-0" value="25">Fashion District</option>
<option class="level-0" value="21">Harbourfront</option>
<option class="level-0" value="20">Little Italy</option>
<option class="level-0" value="16">Parkdale</option>
<option class="level-0" value="15">Trinity Bellwoods</option>
gezeigt
<p class="filter-by-type-label">Filter by type:</p><input type="hidden" id="search_context" name="search_context" value="22" /> <ul class="job_types">
<li><label for="job_type_freelance" class="freelance"><input type="checkbox" name="filter_job_type[]" value="freelance" id="job_type_freelance" /> Freelance</label></li>
<li><label for="job_type_full-time" class="full-time"><input type="checkbox" name="filter_job_type[]" value="full-time" id="job_type_full-time" /> Full Time</label></li>
<li><label for="job_type_internship" class="internship"><input type="checkbox" name="filter_job_type[]" value="internship" id="job_type_internship" /> Internship</label></li>
<li><label for="job_type_part-time" class="part-time"><input type="checkbox" name="filter_job_type[]" value="part-time" id="job_type_part-time" /> Part Time</label></li>
<li><label for="job_type_temporary" class="temporary"><input type="checkbox" name="filter_job_type[]" value="temporary" id="job_type_temporary" /> Temporary</label></li>
</ul>
<input type="hidden" name="filter_job_type[]" value="" />
<button type="submit" data-refresh="Loading..." data-label="Search" name="update_results" class="update_results">Search</button><div class="showing_jobs"></div></form>
CSS:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
Fragen Code Hilfe suchen muss Geben Sie den kürzesten Code ein, der zur Reproduktion erforderlich ist ** in der Frage selbst ** vorzugsweise in einem [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css- und-HTML-Code-Schnipsel /). Obwohl Sie einen [** Link zu einem Beispiel oder einer Site ** angegeben haben] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-einfügen-a-link-to-it), sollte die Verknüpfung ungültig werden, würde Ihre Frage keinen Wert für andere zukünftige SO-Benutzer mit dem gleichen Problem haben. –