Thanks now I understand Now I have added below in css
.attributeFilterPanel7Spikes ul
{
max-height: 300px;
overflow: auto;
}
.manufacturerFilterPanel7Spikes ul
{
max-height: 400px;
overflow: auto;
}
.specificationFilterPanel7Spikes ul
{
max-height: 300px;
overflow: auto;
}
Also let me know is there a way of searching in filters like in link below on filter they are having textbox to search
http://www.centralbooksonline.com/school-books/cbse/nursery.html?p=2
Now I got it I am getting scrolling on Product attribute filters only
But not getting on manufacturers, vendors and Specification Attribute filter.
Please suggest the change for getting filter on them also.
Did you found any solution?
Is below solution working fine at your end and giving scrolling in filters
.attributeFilterPanel7Spikes ul
{
max-height: 300px;
overflow: auto;
}
My path is
Desktop\nopCommerce_3.60_Source\Presentation\Nop.Web\Plugins\SevenSpikes.Nop.Plugins.AjaxFilters\Themes\DefaultClean\Content\AjaxFilters.css
and default clean is my active theme
Please provide the solution or provide update css for this problem
I have changed below is my CSS but it has no effect.
/*
* Copyright 2015 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/
.attributeFilterPanel7Spikes ul
{
max-height: 20px;
overflow: auto;
}
.nopAjaxFilters7Spikes .filtersTitlePanel {
display: none;
}
.nopAjaxFilters7Spikes a {
cursor: pointer;
}
.product-filters {
display: none; /*hide empty default filters*/
}
.nopAjaxFilters7Spikes .block {
min-height: 46px;
margin: 0 auto 10px;
}
.nopAjaxFilters7Spikes .block .title {
position: relative;
overflow: hidden;
padding: 0;
background: #f6f6f6;
margin: 0;
}
.nopAjaxFilters7Spikes .block .filtersGroupPanel {
position: relative;
padding: 15px 10px;
overflow: hidden;
}
.nopAjaxFilters7Spikes .block .title a.toggleControl {
position: relative;
display: block;
cursor: pointer;
padding: 12px 40px 12px 10px;
color: #444;
font-size: 18px;
}
.nopAjaxFilters7Spikes .block .title a.toggleControl:after {
content: "";
position: absolute;
top: 50%;
right: 14px;
width: 12px;
height: 19px;
margin-top: -9px;
background: url(images/filters-toggle.png) center no-repeat;
}
.nopAjaxFilters7Spikes .block .title a.clearFilterOptions {
position: absolute;
top: 50%;
right: 40px;
font-size: 14px;
line-height: 1;
text-transform: lowercase;
color: #888;
cursor: pointer;
margin-top: -7px;
}
.nopAjaxFilters7Spikes .block .title a.clearFilterOptions:hover {
text-decoration: underline;
}
/* search criteria */
.selected-options-list > li {
margin: 10px 0 0;
font-size: 16px;
overflow: hidden;
}
.selected-options-list > li:first-child {
margin: 0;
}
.selected-options-list > li label{
display: block;
color: #444;
margin: 0 0 2px;
}
.selected-options-list > li span {
float: left;
padding: 6px 14px 6px 0;
margin: 0 20px 0 0;
color: #4ab2f1;
cursor: pointer;
background: url(images/filters-remove.png) right center no-repeat;
line-height: 1;
}
.selected-options-list > li span:hover {
text-decoration: underline;
}
/* price range slider */
.priceRangeFilterPanel7Spikes .ui-slider {
margin: 0 0 20px;
border-radius: 0;
height: 11px;
background: #f3f3f3;
border: 1px solid #ddd;
}
.priceRangeFilterPanel7Spikes .ui-slider-range.ui-widget-header {
top: -1px;
height: 11px;
background: #ccc;
border: 1px solid #bbb;
}
.priceRangeFilterPanel7Spikes .priceRangeMinMaxPanel {
overflow: hidden;
margin-bottom: 20px;
}
.priceRangeMinPanel,
.priceRangeCurrentPricesPanel .currentMinPrice {
float: left;
}
.priceRangeMaxPanel,
.priceRangeCurrentPricesPanel .currentMaxPrice {
float: right;
}
.priceRangeMinPanel,
.priceRangeMaxPanel {
font-size: 14px;
color: #888;
}
.priceRangeCurrentPricesPanel .currentMinPrice,
.priceRangeCurrentPricesPanel .currentMaxPrice {
font-size: 16px;
color: #444;
}
.nopAjaxFilters7Spikes .block .title a.clearPriceRangeFilter {
position: absolute;
top: 50%;
right: 40px;
font-size: 14px;
line-height: 1;
text-transform: lowercase;
color: #888;
cursor: pointer;
margin-top: -7px;
}
.nopAjaxFilters7Spikes .block .title a.clearPriceRangeFilter:hover {
text-decoration: underline;
}
.priceRangeFilterPanel7Spikes .ui-slider-handle {
top: -7px !important;
width: 10px !important;
height: 23px !important;
padding: 0 !important;
cursor: pointer !important;
background: #aaa !important;
border: 1px solid #999 !important;
border-radius: 0 !important;
margin: 0 0 0 -1px !important;
}
.priceRangeFilterPanel7Spikes .ui-slider-handle:last-child {
margin-left: -9px !important;
}
Currently I am using trial version of nope 3.60 I have same issue.
Please tell me where I have to change.
I mean in which file so that i can make all filters scrollable.