Fix alignment of filter inputs on member listing page

This commit is contained in:
Patrick Smith 2018-11-13 10:43:34 -05:00
parent 990c24b802
commit d72d018ba2
2 changed files with 23 additions and 19 deletions

View File

@ -27,6 +27,8 @@
flex-basis: 100%;
.usa-input {
flex-basis: 100%;
@media (min-width:1000px) {
margin-top: 0;
}

View File

@ -61,26 +61,28 @@
<button type="button"></button>
</div>
<div class='usa-input filter-input'>
<label for='filter-status'>Filter members by status</label>
<select v-model="status" id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option>
<option value="all">View All</option>
{% for status in status_choices %}
<option value='{{ status.name }}'>{{ status.display_name }}</option>
{% endfor %}
</select>
</div>
<div class="search-bar__filters">
<div class='usa-input'>
<label for='filter-status'>Filter members by status</label>
<select v-model="status" id="filter-status" name="filter-status">
<option value="" selected disabled>Filter by status</option>
<option value="all">View All</option>
{% for status in status_choices %}
<option value='{{ status.name }}'>{{ status.display_name }}</option>
{% endfor %}
</select>
</div>
<div class='usa-input filter-input'>
<label for='filter-role'>Filter members by role</label>
<select v-model="role" id="filter-role" name="filter-role">
<option value="" selected disabled>Filter by role</option>
<option value="all">View All</option>
{% for role in role_choices %}
<option value='{{ role.name }}'>{{ role.display_name }}</option>
{% endfor %}
</select>
<div class='usa-input'>
<label for='filter-role'>Filter members by role</label>
<select v-model="role" id="filter-role" name="filter-role">
<option value="" selected disabled>Filter by role</option>
<option value="all">View All</option>
{% for role in role_choices %}
<option value='{{ role.name }}'>{{ role.display_name }}</option>
{% endfor %}
</select>
</div>
</div>
</form>