How to display filter form horizontally

Trevor

#257927

I apologise for the delay in replying, caused by the weekend and yesterday (Monday) was a national holiday in England. I am now working my way through the backlog of tickets.

You would need to add this CSS:

.searchandfilter > ul {
  display: table;
}
.searchandfilter > ul > li {
  float: left;
}
.searchandfilter ul li.sf-field-submit {
  clear: both;
}

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

[Author]

Posts