How to display filter form horizontally

Anonymous

#258035

This reply has been marked as private.

Anonymous

#258151

This reply has been marked as private.

Trevor

#258164

This reply has been marked as private.

Anonymous

#258189

This reply has been marked as private.

Anonymous

#258209

This reply has been marked as private.

Anonymous

#258224

This reply has been marked as private.

Trevor

#258267

This reply has been marked as private.

Anonymous

#258283

This reply has been marked as private.

Trevor

#258369

OK. You already have many CSS rules added for the form. You need to remove all of what you have (especially the !important ones). It might not be perfect, but it will get you there for desktop view:

.searchandfilter[data-sf-form-id="4617"] > ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 30px;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
  float: left;
}
.searchandfilter[data-sf-form-id="4617"] ul {
  margin-left: 0px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-submit {
  clear: both;
}
.searchandfilter[data-sf-form-id="4617"] h4 {
  font-size: 1.9rem;
  display: inline-block;
  min-width: 160px;
  flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"]  .sf-field-search h4 {
  padding-top: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-audience h4,
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-resource_type h4 {
  min-width: 200px;
}
.searchandfilter[data-sf-form-id="4617"] {
  border: 1px solid #cccbcb;
}
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-reset > input[type=submit],
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-submit > input[type=submit] {
  background-color: #312d7a;
  color: #fff;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
  flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] p {
  display: inline-block;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search p {
  flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search label {
  width: 75%;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
  border-radius: 1.75rem;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
  width: 100%;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li > p > label br {
  display: none;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-reset,
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-submit {
  flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-reset {
  padding-left: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search {
  flex: 0 0 100%;
  display: flex;
}
.searchandfilter[data-sf-form-id="4617"] select.sf-input-select {
  min-width: 300px;
  width: auto;
}

Trevor

#258371

Sorry, I edited that in the post, so copy what is in the post.

[Author]

Posts