I am trying to figure out how to get the “filter by” drop down and the search field and button up on the same same line (like in the tutorial preview - Real Estate Listing Example) instead of stacked on top of eachother. Any suggestions?
Also, the place holder text “Search by Keyword…” does not show up on desktop, but you can see it on mobile. I changed it from the tutorial from “Search by Ciry of Zip Code…”
Here is all of my code… (I also used parts of the “Team Member” tutorial)
{# Load Card Stylesheet #}
{{ require_css(Custom/page/css/team-member-card.css) }}
<!-- set the filter by drop down, search bar, and submit button -->
<div>
<form id=“form_id” method=“get”>
<div>
<h4>FILTER BY TYPE OF COURSE:</h4>
<select name=“type” form=“form_id” onChange=“this.form.submit()”>
<option value=“show-all”>Show All</option>
{% set types = hubdb_table_column(674971, “type”).options %}
{% for choice in types %}
{% set type_list = type_list~choice.id|list%}
{% if choice.id == request.query_dict.type%}
<option selected=“selected” value=“{{ choice.id }}”>{{ choice.name }}</option>
{% else %}
<option value=“{{ choice.id }}”>{{ choice.name }}</option>
{% endif %}
{% endfor %}
</select>
<div>
<input name=“keyword” type=“text” id=“search-by” class=“autocomplete” placeholder=“Search by Keyword…”> <input id=“submit-button” type=“submit” value=“Search”>
</div>
</div>
</form>
</div>
<br>
<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = “” %}
{% if request.query_dict.type in [“1”, “2”, “3”, “4”, “5”, “6”] and request.query_dict.keyword == “” %}
{% set queryparam = queryparam ~ “&type=”~request.query_dict.type|urlencode %}
{% endif %}
{% if request.query_dict.type in [“1”, “2”, “3”, “4”, “5”, “6”] and request.query_dict.keyword != “” %}
{% set queryparam = queryparam~“&type=”~request.query_dict.type|urlencode~“&keyword__icontains=”~request.query_dict.keyword|urlencode %}
{% endif %}
{% if request.query_dict.type == “show-all” and request.query_dict.keyword != “” %}
{% set queryparam = queryparam~“&keyword__icontains=”~request.query_dict.keyword|urlencode %}
{% endif %}
{# Get Team Members from HubDB #}
{% set table = hubdb_table_rows(674971, queryparam)%}
{% if table == [] %}
<p class=‘align-center’>Sorry, no listings found for that Search. Try changing your fiter and search again.</p>
{% else %}
{% for row in table %}
<div class=“team-member-card-container {{ widget.cards_in_row }}”>
<div class=“team-member-card”>
<div class=“image-container”>
<a href=“{{ row[“course_url”] }}”><img src=“{{ row.course_image }}” width=“500” {% if row.image.width > row.image.height %}class=“landscape”{% endif %} alt=“{{ row.name }} Image”></a>
</div>
<div class=“team-member-info”>
<h3>{{ row.name }}</h3>
<h4>Length: {{ row.length }} Days</h4>
<p>{{ row.description }}</p><br>
<p><a href=“{{ row[“course_url”] }}”>Details</a></p><br>
</div>
</div>
</div>
{% endfor %}
{% endif %}