Search Results for 'data-sf-form-id .searchandfilter'

[Anonymous]

Ok, I just confirmed that my body class tags are different, so I will give it a try.

Can you tell me where the body class might go into this code snippet?

.searchandfilter[data-sf-form-id="###"]  > ul > li {
display: inline-block;
margin-right: 20px;
}
.searchandfilter > ul > li:last-child {
margin-right: 0;
}

[Trevor]

In order to make it wider than the default, you would need to give it a fixed width or a % (of the container), like this:

.searchandfilter[data-sf-form-id="450621"] ul li .sf-input-text {
  width: 125px;
  min-width: 125px !important;
}

Where you replace 450621 with your form ID number.

[Trevor]

A search of these forums showed that I have done it like this before:

.searchandfilter[data-sf-form-id="450621"] ul li .sf-input-text {
  width: 125px;
  min-width: 125px !important;
}

I notice that your license has expired (many months ago), so I will not be able to offer additional support until it is renewed.

[Trevor]

This would be more like ti then:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"] > ul:before {
  content: "SEARCH";
  float:left;
  padding-top: 28px;
  font-size: 14px;	
  color: #fff;
  margin-right: 20px;
  letter-spacing: 3px;
  font-weight: 400;
}

[Trevor]

Something like this maybe:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"]:before {
  content: "Search";
  float:left;
  padding-top: 20px;
  font-size: 25px;	
}

[Anonymous]

I am copying the following to my child theme stylesheet as I want search fields to appear horizontally, however there is no change.

.searchandfilter[data-sf-form-id=”2374″]
{
display: inline !important;
font-size: 100px !important;
}

I’ve also tried

.searchandfilter p
{
display: inline !important;
font-size: 100px !important;
}

Can you please advise?

Thank you.

[Anonymous]

Thank you I found this thread https://support.searchandfilter.com/forums/topic/sf-horizontal-the-final-solution/ which helped a lot but the problem I am coming across right now is getting the check boxes to line up in 3 columns in a row like in the photo above. here is the css I am using .

.searchandfilter[data-sf-form-id=”116014″] .chosen-container.chosen-container-multi {
width: 100% !important;
margin-top: -5px !important;
}

.searchandfilter[data-sf-form-id=”116014″] input.default {
border-color: rgba(0,0,0,0.3);
outline: 1;
outline: thin dotted \9;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
transition: border linear 0.2s,box-shadow linear 0.2s;
}

.searchandfilter[data-sf-form-id=”116014″] li.sf-field-category {
width: 30% !important;
}

.searchandfilter[data-sf-form-id=”116014″] select.sf-input-select {
width: 100%;
}
`

[Trevor]

Hi

You would need to decide which bits need to be where, but this for example:

.searchandfilter[data-sf-form-id="41629"] li.sf-field-category {
    width: 20% !important;
}

Might become this:

.searchandfilter[data-sf-form-id="41629"] li.sf-field-category {
    width: 20% !important;
    float: left;
    display: inline-block !important;
}

and so on.

[Anonymous]

Ok this is the final result with consistency:

.searchandfilter[data-sf-form-id="2545"] > ul > li {
	display:inline-block !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-search {
  width: 40%;
  padding-right:10px !important;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-tag {
  width: 40%;
  padding-right:10px !important;
}

/* format tag fields for consistency */
.searchandfilter[data-sf-form-id="2545"] .chosen-container-multi .chosen-choices {
    display: inline-block;
    height: 2.65em !important;
    margin-bottom: 0px;
    border: 1px solid #ddd;
    padding: 0 0.65em;
    font-size: 13px;
    line-height: normal;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
} 

.searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi {
    width: 100% !important;
      margin-top: -5px !important;
}

.searchandfilter[data-sf-form-id="2545"] input.default {
border-color: rgba(0,0,0,0.3);
    outline: 0;
    outline: thin dotted \9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2);
  -webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
    transition: border linear 0.2s,box-shadow linear 0.2s;
}

.searchandfilter[data-sf-form-id="2545"] li.sf-field-category {
    width: 20% !important;
}

.searchandfilter[data-sf-form-id="2545"] select.sf-input-select {
    width: 100%;
}

Hope can help a lot of people that are trying to have an horizontal view for S&F.

Now I just need to edit the @media CSS for smartphones and tablets.

[Ross]

Hey Luis

You can target a search form using the ID already:

.searchandfilter[data-sf-form-id=123] input[type=text]
{
    border:1px solid #f00;
}

Thanks