Side by Side Spec Filters

Hi.

Installed Ajax Filters a couple days ago. It does what is advertised and I am happy with the functionality.

After the initial testing, I created a custom widget zone on the category page just below the "view as " and "sort by" drop downs and moved the Ajax Filters to this zone.
This was pretty straight forward and easy to do ..although I have also only been using NopCommerce a few days as well.

The modules or containers for the spec filter drop downs are too big and bulky for my particular application of them, since they are in the middle pane. I would like them as small and subtle as the "view as", "sort by", and "display" dropdowns on the category page.

To that end, I removed the css class "block filter-block specificationFilterPanel7Spikes" from specificationfilter.cshtml

Changed from this::: <div class="block filter-block specificationFilterPanel7Spikes">
To this:::::<div>

I like that change. It eliminates the container and leaves only the drop downs.

My problem is that I can't seem to get the specification filters to display side by side rather than on top of one another. This consumes to much vertical space for me.

Have been messing with the divs in specificationfilter.cshtml, trying to change things to spans. I can get the drop downs side by side but it looks like, dropdown1, dropdown2, label1, label2...which is completely illogical. I cannot seem to get a format that makes sense out of this...any help out there????

Here is the code I've mangled up so far::::::::::::::

@** Copyright 2012 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*@

@model SpecificationFilterModel7Spikes

@{
    Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.AjaxFilters/Scripts/SpecificationFilter.min.js");
}

@using System.Text;
@using SevenSpikes.Nop.AjaxFilters.Models.SpecificationFilter;
@using SevenSpikes.Nop.AjaxFilters.Common;
@using SevenSpikes.Nop.AjaxFilters.Domain;
@using Nop.Web.Framework.UI;


@if(Model.NopAjaxFiltersSettings.FiltersUIMode == FiltersUIMode.UseDropdowns)
{  
    var stringBuilder = new StringBuilder();
    
    foreach(SpecificationFilterGroup specificationFilterGroup in Model.SpecificationFilterGroups)
    {
        stringBuilder.Append("#specificationFiltersDropDown");
        stringBuilder.Append(specificationFilterGroup.Id);
        stringBuilder.Append(",");
    }
    
    string specificationFilterPanelsSelector = stringBuilder.ToString().TrimEnd(new[] {','});
    
    <script type="text/javascript">

        $(document).ready(function () {

            $("@specificationFilterPanelsSelector").jDropDown();
        })

    </script>
}

@{
    int optionsGroupIndex = 0;
    int currentZIndex = Model.SpecificationFilterGroups.Count + 100;
}

@foreach (SpecificationFilterGroup specificationFilterGroup in Model.SpecificationFilterGroups)
{
    Func<int, HelperResult> specificationOptionsHtml =
        @<text>
            @foreach (SpecificationFilterItem specificationFilterItem in specificationFilterGroup.FilterItems)
            {
                string filterItemCssClass = "filterItemUnselected";

                if (specificationFilterItem.FilterItemState == FilterItemState.Checked)
                {
                    filterItemCssClass = "filterItemSelected";
                }
                    
                <li>
                    <a class="@filterItemCssClass" data-option-id="@specificationFilterItem.Id">@specificationFilterItem.Name</a>
                </li>
            }
        </text>;
    
    @*<div class="block filter-block specificationFilterPanel7Spikes">
        <span class="title">
           <a class="toggleControl">@specificationFilterGroup.Name</a>
           <a class="clearFilterOptions">@T("SevenSpikes.NopAjaxFilters.Client.Common.Clear")</a>
        </div>
        
            @if (Model.NopAjaxFiltersSettings.Filte

got cut off by character limit I think. here is the main bit of code from specificationfilter.cshtml

    @*<div class="block filter-block specificationFilterPanel7Spikes">
        <span class="title">
           <a class="toggleControl">@specificationFilterGroup.Name</a>
           <a class="clearFilterOptions">@T("SevenSpikes.NopAjaxFilters.Client.Common.Clear")</a>
        </div>
        
            @if (Model.NopAjaxFiltersSettings.FiltersUIMode == FiltersUIMode.UseCheckboxes)
            {
                <div class="filtersGroupPanel" data-optionsGroupId="@specificationFilterGroup.Id">
                    <ul>
                        @specificationOptionsHtml(0)
                    </ul>
                </div>
            }
            else if (Model.NopAjaxFiltersSettings.FiltersUIMode == FiltersUIMode.UseDropdowns)
            {
            *@
   <span> <a class="toggleControl">@specificationFilterGroup.Name</a>
                <span class="filtersGroupPanel filtersDropDownPanel" data-optionsGroupId="@specificationFilterGroup.Id" style="z-index: @currentZIndex;">
                
                    <div id="@String.Concat("specificationFiltersDropDown", specificationFilterGroup.Id)" class="filtersDropDown">
                        <div>
                            <p></p>
                        </div>
                      
                        <ul>
                            <li class="selected">
                                <a class="allFilterDropDownOptions">@T("SevenSpikes.NopAjaxFilters.Client.Common.All")</a>
                            </li>
                            @specificationOptionsHtml(0)
                        </ul>
                    </div>
                </span></span>
           @* }
        
    </span>*@
    
    optionsGroupIndex++;
    currentZIndex--;
    
}

Hi,

By what you have described it looks like you have a css problem and I don't think you should change the markup of the Ajax Filters. I am not sure how familiar you are with css but basically you can achieve everything only by css changes.
You can checkout this web site that has the filters positioned above the category products.
http://www.bulrushop.com/c/95/diamond-necklaces

We could advice but you need to send us a link to your web site without any modifications to the Filters, so that we can take a quick look and help.

Thanks