Search form customize styling - Search & Filter Support

This topic has 13 replies, 2 voices, and was last updated 6 years, 5 months ago by Anonymous.

Viewing 10 posts – 1 through 10 (of 14 total)

1 2 →

Anonymous

(Private) May 15, 2020 at 10:01 am #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

(Private) May 15, 2020 at 10:56 am #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

(Private) May 15, 2020 at 11:32 am #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

(Private) May 15, 2020 at 11:40 am #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

(Private) May 15, 2020 at 11:42 am #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

(Private) May 15, 2020 at 11:51 am #244096

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

Trevor

(Private) May 15, 2020 at 11:58 am #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

(Private) May 15, 2020 at 12:22 pm #244118

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

Trevor

(Private) May 15, 2020 at 12:28 pm #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

(Private) May 16, 2020 at 12:08 pm #244345

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

Author

Posts

Viewing 10 posts – 1 through 10 (of 14 total)

1 2 →