Search form customize styling

Anonymous

#244070

THIS TOPIC IS FOR TREVOR.

I have a problem with css code created for me in this topic: https://support.searchandfilter.com/forums/topic/search-form-customize-styling/

I added the short code in homepage: https://www.virusfree-europa.com/
I added css-class “sandf-horizontal” but I still see the search form in vertical position.
Why?

Trevor

#244081

I think you removed the original CSS you had used, so add this to the CSS I gave you:

.sandf-horizontal .searchandfilter > ul > li {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
.sandf-horizontal .searchandfilter > ul > li:first-child {
  padding-left: 0;
}

Anonymous

#244084

I wrote this CSS code:

.sandf-horizontal .searchandfilter > ul {
  margin: 0 auto;
  display: table;
}
.sandf-vertical .searchandfilter > ul {
  margin-left: 0;
}
.sandf-vertical .searchandfilter > ul > li label,
.sandf-vertical .searchandfilter > ul > li input,
.sandf-vertical .searchandfilter > ul > li label select {
  width: 100%;
}
.sandf-horizontal .searchandfilter > ul > li label,
.sandf-horizontal .searchandfilter > ul > li input,
.sandf-horizontal .searchandfilter > ul > li label select {
  min-width: 225px;
}

.searchandfilter > ul > li label,
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
  color: #000;
  border-color: #000 !important;
}
.searchandfilter > ul > li.sf-field-submit input {
  background: #e84c3d;
	color: #fff;
}

blue-form-bg .searchandfilter > ul > li label {
    background-color: blue;
}
beige-form-bg .searchandfilter > ul > li label {
    background-color: #f5f5dc;
}
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
    background-color: #fff;
}

In these pages I have horizontal view:
https://www.virusfree-europa.com/operatori-autorizzati/
https://www.virusfree-europa.com/strutture/

Whitout write this code:

.sandf-horizontal .searchandfilter > ul > li {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
.sandf-horizontal .searchandfilter > ul > li:first-child {
  padding-left: 0;
}

Trevor

#244088

I am sorry, I do not understand. You can have the code on all pages, it should not matter. Does it now work?

Anonymous

#244091

I added this code in style.css

.sandf-horizontal .searchandfilter > ul {
  margin: 0 auto;
  display: table;
}
.sandf-vertical .searchandfilter > ul {
  margin-left: 0;
}
.sandf-vertical .searchandfilter > ul > li label,
.sandf-vertical .searchandfilter > ul > li input,
.sandf-vertical .searchandfilter > ul > li label select {
  width: 100%;
}
.sandf-horizontal .searchandfilter > ul > li label,
.sandf-horizontal .searchandfilter > ul > li input,
.sandf-horizontal .searchandfilter > ul > li label select {
  min-width: 225px;
}

.searchandfilter > ul > li label,
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
  color: #000;
  border-color: #000 !important;
}
.searchandfilter > ul > li.sf-field-submit input {
  background: #e84c3d;
	color: #fff;
}

blue-form-bg .searchandfilter > ul > li label {
    background-color: blue;
}
beige-form-bg .searchandfilter > ul > li label {
    background-color: #f5f5dc;
}
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
    background-color: #fff;
}

I added “.sandf-horizontal” css class to my fields.

In these pages I have horizontal view:
https://www.virusfree-europa.com/strutture/
https://www.virusfree-europa.com/operatori-autorizzati/

In this page I don’t have horizontal view:
https://www.virusfree-europa.com/

Anonymous

#244096

The first field on mobile view is slightly to the left: https://ibb.co/2g1D3Y9

Trevor

#244100

This is the total code you should have, not what you showed me:

.sandf-horizontal .searchandfilter > ul {
  margin: 0 auto;
  display: table;
}
.sandf-vertical .searchandfilter > ul {
  margin-left: 0;
}
.sandf-vertical .searchandfilter > ul > li label,
.sandf-vertical .searchandfilter > ul > li input,
.sandf-vertical .searchandfilter > ul > li label select {
  width: 100%;
}
.sandf-horizontal .searchandfilter > ul > li label,
.sandf-horizontal .searchandfilter > ul > li input,
.sandf-horizontal .searchandfilter > ul > li label select {
  min-width: 225px;
}

.searchandfilter > ul > li label,
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
  color: #000;
  border-color: #000 !important;
}
.searchandfilter > ul > li.sf-field-submit input {
  background: #e84c3d;
  color: #fff;
}

blue-form-bg .searchandfilter > ul > li label {
  background-color: blue;
}
beige-form-bg .searchandfilter > ul > li label {
  background-color: #f5f5dc;
}
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
  background-color: #fff;
}
.sandf-horizontal .searchandfilter > ul > li {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
}
.sandf-horizontal .searchandfilter > ul > li:first-child {
  padding-left: 0;
}

Anonymous

#244118

Ok thank you. The first field on mobile view is slightly to the left: https://ibb.co/2g1D3Y9

Trevor

#244120

Is that on the vertical forms? I know they are all vertical, but you know what I mean, the ones that would be vertical on desktop?

You might need to remove this part of the ocde:

.sandf-horizontal .searchandfilter > ul > li:first-child {
  padding-left: 0;
}

Anonymous

#244345

No, the screenshot is an horizontal form tath would be vertical on mobile.

[Author]

Posts