HubDB Real Estate Tutorial Filter and Search Field Alignment

[leckerman]

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 - http://designers.hubspot.com/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 %}

[Jsum · Accepted solution]

@leckerman,

Here is the html to the example you shared:

<!-- set the filter by drop down, search bar, and submit button -->
<div class="filter-form">
    <div class="row-fluid search-form">
        <form id="form_id" method="get">
            <div class="filter span6">
                <h4>FILTER BY LISTING TYPE: </h4>
                <select name="type" id="filter-select" form="form_id" onchange="this.form.submit()">
                     <option value="show-all">Show All</option>
                     <option value="1">Single Family</option>
                     <option value="2">Multi Family</option>
                     <option value="3">Commercial</option>
                </select>
           </div>
    
           <div class="search span4">
               <input name="listing_address" type="text" id="search-by" class="autocomplete" placeholder="Search by City or Zip Code...">
          </div>
          <input id="submit-button" type="submit" value="search">
        </form>
      </div>
</div> 

The example is using structural classes from Hubspot's framework css. That is why they are inline instead of stacked. You could do the same or create your own css for floats to get the same effect. 

[roisinkirby]

Hey @leckerman could you please share a link to the live/preview page you are working on? With this a few members of the community might be able to help

CC: @ndwilliams3, @Jsum, @TRooInbound, @Ty

[ndwilliams3]

I'm sure it's a simple CSS fix. Provide a link and we'll get you fixed up.