Ещё элементы в строке

by AJIEKCEU

HTML

<div class="new-container">
	<div class="new-row">
		<form name="_form" class="smart-filter">
			<div class="smart-filter__col">
							<input class="smart-filter__checkbox" type="checkbox" value="Y" id="arrFilter_77_1885172822">
							<label class="smart-filter__label" for="arrFilter_77_1885172822">
								<span class="smart-filter__label-inner">
										<span class="smart-filter__name">Азиатская</span>
								</span>
							</label>
						</div>
			<div class="smart-filter__col">
							<input class="smart-filter__checkbox" type="checkbox" value="Y" name="arrFilter_77_1087133878" id="arrFilter_77_1087133878">
							<label class="smart-filter__label" for="arrFilter_77_1087133878">
								<span class="smart-filter__label-inner">
									<span class="smart-filter__img"></span>
									<span class="smart-filter__name">Бургеры</span>
								</span>
							</label>
						</div>
			<div class="smart-filter__col">
							<input class="smart-filter__checkbox" type="checkbox" value="Y" name="arrFilter_77_3996770805" id="arrFilter_77_3996770805">
							<label class="smart-filter__label" for="arrFilter_77_3996770805">
								<span class="smart-filter__label-inner">
									<span class="smart-filter__name">Десерты</span>
								</span>
							</label>
						</div>
			<div class="smart-filter__col">
							<input class="smart-filter__checkbox" type="checkbox" value="Y" name="arrFilter_77_1999679567" id="arrFilter_77_1999679567">
							<label class="smart-filter__label" for="arrFilter_77_1999679567">
								<span class="smart-filter__label-inner">
									<span class="smart-filter__name">Домашняя</span>
								</span>
							</label>
						</div>
			<div class="smart-filter__col">
							<input class="smart-filter__checkbox" type="checkbox" value="Y" name="arrFilter_77_123356352" id="arrFilter_77_123356352">
							<label class="smart-filter__label" for="arrFilter_77_123356352">
								<span class="smart-filter__label-inner">
									<span...

CSS

.new-container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	width: 100%;
	padding: 0 15px;
}

.new-row {
	margin: 0 -15px;
}

.delivery-address__content {
	padding: 0 25px;
}

.adrr-content {
	display: flex;
	flex-wrap: wrap;
	padding: 30px 0;
}

.adrr-content__main {
	width: 100%;
	padding: 0 10px;
	margin-bottom: 10px;
	margin-right: 0;
	flex: auto;
}

.adrr-content__aside {
	width: 100%;
	padding: 0 10px;
	margin-top: 0;
	flex: auto;
}

.search-restaurants {
	position: relative;
}

.search-restaurants .icon {
	position: absolute;
	left: 22px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	fill: #757575;
}

.search-restaurants__field {
	width: 100%;
	height: 46px;
	padding-left: 48px;
	padding-right: 10px;
	border-radius: 10px;
	background-color: #fff;
}

.adrr-content__main .input_address_main {
	width: 100%;
	min-height: 46px;
	padding: 0 15px;
	border-radius: 9px;
	margin-bottom: 10px;
}

.adrr-content__main .getAddress {
	border-radius: 9px;
	padding: 11.5px 22px;
	text-align: center;
}

.AddressControl_content_main form {
	display: block;
}

.search-restaurants__result {
	z-index: 10;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 400px;
	overflow-y: auto;
}

.result_active .search-restaurants__field {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.result_active .search-restaurants__result {
	padding: 15px 0;
	background-color: #fff;
	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.07), inset 0px 1px 0px #FD4141;
	border-radius: 0 0 10px 10px;
}

.search-restaurants__result-item {
	display: flex;
	margin-bottom: 20px;
	padding: 0 10px;
}

.search-restaurants__result-item:last-child {
	margin-bottom: 0;
}

.search-restaurants__result-img {
	display: block;
	max-width: 40px;
	margin-right: 10px;
	flex-shrink: 1;
}
.search-restaurants__result-info{
	display: block;
}
.search-restaurants__result-ttl {
	display: block;
	margin-bottom: 5px;
	color: #000;
}

.search-restaurants__result-txt...

JavaScript

var objEl = {
			win: $(window),
			body: $('body')
		}

function sumWidthElementsFilter(){
	var allWidth = 0;
  $('.smart-filter > .smart-filter__col').each(function () {
    var that = $(this),
        thatWidth = that.outerWidth();
    allWidth += thatWidth;
  });
  return allWidth;
}

function showHidesFilterElements() {
  var wFilter = $('.smart-filter').outerWidth(),
      filterCol = $('.smart-filter > .smart-filter__col'),
      filterColq = filterCol.length,
      filterColMore = $('.filter-more > .smart-filter__col'),
      filterColMoreq = filterColMore.length;
  
  for(var i = 0; i < filterColq; i++){
    var filterColW = $('.smart-filter > .smart-filter__col:first-child').outerWidth(),
    		totalWidth = sumWidthElementsFilter();

    if (totalWidth > wFilter){
      totalWidth = totalWidth - filterColW;
      var lastEl = $('.smart-filter > .smart-filter__col:nth-last-child(2)'),
          lastElClone = lastEl.clone();
      $('.filter-more').prepend(lastElClone);
      lastEl.remove();
      $('.js-more-filter').removeClass('hide');
    }
  }

  for(var i = 0; i < filterColMoreq; i++){
    var filterColW = $('.smart-filter > .smart-filter__col:first-child').outerWidth(),
    		totalWidth = sumWidthElementsFilter();
    if (wFilter >= totalWidth+filterColW){
      var lastEl = $('.filter-more .smart-filter__col:first-child'),
          lastElClone = lastEl.clone();
        
      $('.smart-filter > .smart-filter__col:last-child').before(lastElClone);
      lastEl.remove();
      
      if(!$('.filter-more .smart-filter__col').length){
        $('.js-more-filter').addClass('hide');
      }
      else{
        $('.js-more-filter').removeClass('hide');
      }
    }
  }
}
    
objEl.win.resize(function () {
			var winW = objEl.win.outerWidth();

			if(winW >= 768){
				showHidesFilterElements();
			}
			else if(winW < 768 && $('.filter-more .smart-filter__col').length){
				var filterMoreContent =...