Search Results for 'horizontal'

[Anonymous]

Still waiting for it to be fixed!

While waiting, I created 3 separate post types and newly assigned the posts archives to each of them. And it seems like it would work, ONLY IF THE SUBMIT BUTTON WORKS.

The submit button is not working. It searches correctly only if I refresh the page.

I also still would like 1 of them to be vertical. With the added codes you provided, all of them are horizontal now.

Thanks.

[Anonymous]

I would like the search form on this page to be vertical because of the checkboxes.
https://creatorscycle.com/category/artist-grants/

These 2 search forms to be horizontal, aligned.
https://creatorscycle.com/category/creators-life/
https://creatorscycle.com/category/basic-life-for-creators/

[Anonymous]

Just adding another question. How can I align the boxes and buttons horizontally in CENTER, instead of top? Even for the search form without headline, the search box and the button is just tiny bit off.

Thanks.

[Anonymous]

Hi Trevor,

Thanks so much for your detailed reply!

I added the code to make it horizontal and it looks almost perfect… But the submit button is aligned to the headlines instead of the boxes and it looks a bit off… It’d be also nice to have ability to have it vertical, too…

>Do you still need 3 forms based on the same Post Type?

So, I don’t quite understand what it means to “use same post type”… How can I make it with different post types? If I use different post types, it works without you adding things?

They are all like archive pages of posts but uses different categories. “Using same post type” means they are all coming from POSTS tab? If so they ARE all coming from the POSTS tab… What would be my option to use different post types?

I thought that if I make an independent posts group apart from the ones POSTS tab, maybe it wouldn’t be “using same post type”, so I downloaded Custom Post Type UI plugin and made an independent post tab, and tried again, but it seems like Elementor doesn’t recognize the posts in the new post tab so I couldn’t make it work.

I cannot code and I am a beginner, so I want to keep it as simple as possible. If you make changes to my search forms, will I be able to make changes later on?

Thanks so much!

[Trevor]

Did it fix it? Did you remove that one block of code to leave you with this:

.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;
}

[Anonymous]

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

[Trevor]

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;
}

[Trevor]

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]

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]

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;
}