Fix overlapping elements in add member form

pull/4805/head
Henriette Dinger 8 years ago
parent 7a1d262c05
commit 7c34d40219
  1. 35
      app/assets/stylesheets/_misc_legacy.sass
  2. 2
      app/assets/stylesheets/content/_forms.sass
  3. 12
      app/views/members/_member_form_non_impaired.html.erb

@ -609,24 +609,39 @@ a.impaired--empty-link,
#members_add_form #members_add_form
.-flex .-flex
display: flex display: flex
align-items: center align-items: flex-end
.form--field,
#member-add-submit-button--container
margin-bottom: 1px
flex-basis: 50%
// Override default margin to allow correct vertical alignment // Override default margin to allow correct vertical alignment
#add-member--submit-button #add-member--submit-button
// workaround to put the button next to the select box
flex-basis: 100%
margin-right: 65%
margin-bottom: 0 margin-bottom: 0
margin-left: 1rem margin-left: 1rem
margin-top: 0.5rem
// Neccessary so that button and select box have the same height // Neccessary so that button and select box have the same height
line-height: 0.6rem line-height: 0.6rem
@include breakpoint(680px down) @include breakpoint(680px down)
#members_add_form #members_add_form .-flex
.-flex align-items: flex-start
align-items: flex-start
&.-with-button
flex-direction: column flex-direction: column
// Workaround for safari and IE
// They are not able to get the correct height with flex-direction: column
height: 120px
#add-member--submit-button #add-member--submit-button
margin-left: 0 margin-left: 0
.form--field
margin-bottom: 1rem
@media screen and (max-width: 970px) and (min-width: 681px)
#members_add_form .-flex.-with-button
.form--field
max-width: 50%
select
max-width: 66%

@ -68,7 +68,7 @@ $form--field-types: (text-field, text-area, select, check-box, radio-button, ran
padding: 10px 20px 0 20px padding: 10px 20px 0 20px
&.-medium-compressed &.-medium-compressed
padding: 20px 20px 10px 20px padding: 10px 20px 20px 20px
&.danger-zone &.danger-zone
border: 1px solid $content-form-danger-zone-bg-color border: 1px solid $content-form-danger-zone-bg-color

@ -36,7 +36,7 @@ See doc/COPYRIGHT.rdoc for more details.
<a title="{{ ::I18n.t('js.close_form_title') }}" class="form--close icon-context icon-close" onClick="hideAddMemberForm()"></a> <a title="{{ ::I18n.t('js.close_form_title') }}" class="form--close icon-context icon-close" onClick="hideAddMemberForm()"></a>
<div id="new-member-message"></div> <div id="new-member-message"></div>
<div class="grid-block"> <div class="grid-block">
<div class="grid-content medium-5 small-12 collapse"> <div class="grid-content medium-5 small-12 collapse -flex">
<div class="form--field"> <div class="form--field">
<% <%
user_id_title = I18n.t(:label_principal_search) user_id_title = I18n.t(:label_principal_search)
@ -57,7 +57,7 @@ See doc/COPYRIGHT.rdoc for more details.
class: "select2-select remote" %> class: "select2-select remote" %>
</div> </div>
</div> </div>
<div class="grid-content medium-7 small-12 -flex"> <div class="grid-content medium-7 small-12 -flex -with-button">
<div class="form--field"> <div class="form--field">
<%= styled_label_tag :member_role_ids, l(:label_role_search) %> <%= styled_label_tag :member_role_ids, l(:label_role_search) %>
<div class="form--field-container"> <div class="form--field-container">
@ -73,9 +73,11 @@ See doc/COPYRIGHT.rdoc for more details.
</div> </div>
</div> </div>
</div> </div>
<%= f.button l(:button_add), id: 'member-add-submit', <div id="member-add-submit-button--container">
class: 'button -highlight -with-icon icon-checkmark', <%= f.button l(:button_add), id: 'member-add-submit',
id: 'add-member--submit-button' %> class: 'button -highlight -with-icon icon-checkmark',
id: 'add-member--submit-button' %>
</div>
</div> </div>
</div> </div>
<% end %> <% end %>

Loading…
Cancel
Save