Moving dropdown container to left

This commit is contained in:
Anton Ignatov 2019-03-25 13:56:32 +01:00
parent d26c885be7
commit 2d5df1b3b7
3 changed files with 34 additions and 5 deletions

View file

@ -24,7 +24,6 @@ $.fn.extend({
select2.next().find('.select2-selection .select2-selection__rendered').css('width', '100%');
}
// select all check
this[0].dataset.singleDisplay = config.singleDisplay || false;
if (this[0].dataset.selectAll === 'true') {
@ -49,6 +48,10 @@ $.fn.extend({
$(selectElement).select2('open');
});
}
if (selectElement.dataset.dropdownPosition === 'left') {
$('.select2-dropdown').parent().addClass('left-position');
}
})
// Prevent shake bug with multiple select
.on('select2:open select2:close', function() {

View file

@ -30,6 +30,7 @@
.select2-dropdown {
border: 1px solid $color-alto;
z-index: 1000;
.select2_select_all {
border: 0;
@ -87,3 +88,25 @@
}
}
}
@media (min-width: 1200px) {
.select2-container--open.left-position {
left: calc(75% - 280px) !important;
top: 60px !important;
.select2-dropdown {
border-radius: 0px;
height: calc(100vh - 70px) !important;
width: 300px !important;
.select2-results {
height: calc(100% - 31px);
}
.select2-results__options {
max-height: 100%;
}
}
}
}

View file

@ -5,7 +5,8 @@
<%= select_tag "team", options_from_collection_for_select(@teams, :id, :name, current_user.current_team_id),{
'data-select-all-button': t('global_activities.index.all_teams'),
'data-select-multiple-name': t('global_activities.index.l_teams'),
'data-select-multiple-all-selected': t('global_activities.index.all_teams')
'data-select-multiple-all-selected': t('global_activities.index.all_teams'),
'data-dropdown-position': 'left'
} %>
</div>
</div>
@ -40,7 +41,8 @@
'data-select-all-button': t('global_activities.index.all_activities'),
'data-select-all': 'true',
'data-select-multiple-name': t('global_activities.index.l_activities'),
'data-select-multiple-all-selected': t('global_activities.index.all_activities')
'data-select-multiple-all-selected': t('global_activities.index.all_activities'),
'data-dropdown-position': 'left'
} %>
</div>
</div>
@ -53,7 +55,8 @@
'data-select-all-button': t('global_activities.index.all_users'),
'data-select-all': 'true',
'data-select-multiple-name': t('global_activities.index.l_users'),
'data-select-multiple-all-selected': t('global_activities.index.all_users')
'data-select-multiple-all-selected': t('global_activities.index.all_users'),
'data-dropdown-position': 'left'
} %>
</div>
</div>
@ -62,6 +65,6 @@
<h4 class="title"><strong><%= t('global_activities.index.object') %></strong></h4>
<h6 class="clear"><%= t('global_activities.index.clear') %></h6>
<div class="select-container">
<select name="subject" data-select-all="false"></select>
<select name="subject" data-select-all="false" data-dropdown-position="left"></select>
</div>
</div>