Looking to create three inline dropdowns that utilize all available space without stacking on mobile devices.
Here is the current RoR code being used:
<div class="three fields">
<!-- birthdate day -->
<div class="inline field">
<%= select_day(nil, {prompt: 'Day', use_two_digit_numbers: true, field_name: 'birthdate_day', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
</div>
<!-- birthdate month -->
<div class="inline field">
<%= select_month(nil, {prompt: 'Month', field_name: 'birthdate_month', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
</div>
<!-- birthdate year -->
<div class="inline field">
<% min_year = Date.today.year - @sign_up_min_age %>
<% max_year = Date.today.year - @sign_up_max_age %>
<%= select_year(nil, {prompt: 'Year', start_year: min_year, end_year: max_year,
field_name: 'birthdate_year', prefix: :user}, {class: 'ui fluid search dropdown'}) %>
</div>
</div>
When using three fields, they take up all available space but stack on mobile. Changing to inline fields prevents stacking but does not fully occupy the space. A solution like three inline fields is desired.
After reviewing documentation and testing various combinations, no suitable solution has been found.
Thank you for your assistance.