Aligning fields in search form

Cassie

#227952

Hi there

I have a search form with 6 search fields. Using the .css provided in your documentation, I’ve managed to make the form display horizontally so that the fields are now displayed in 2 rows of 3 but it all still looks a bit messy so ideally I’d either like to –

Evenly space the fields in 3 columns across the width of the form (ie. so that field 4 lines up underneath field 1, field 5 underneath field 2 etc)

OR

Centre each row of 3 across the width of the form (currently they seem to be left aligned) ie. fields below wouldn’t necessarily align with those above but would at least look a little neater if each row is centred

I suspect I may need to target each field separately to achieve this but do you have any suggestions as to how to approach? I’ve searched through as many of the support forum threads as I can find and can’t seem to find this particular scenario mentioned.

Unfortunately I can’t give a link as the site is not yet live but hopefully the above at least makes some sense.

With many thanks in advance.

Add New Note to this Reply

Trevor Moderator

#227956

It does makes sense yes, but I would (and I know you can’t give) need access to view the page, even if you can make a staging copy I can work with. I cannot give you generic CSS to do it.

Add New Note to this Reply

Trevor Moderator

#227958

This reply has been marked as private.

Add New Note to this Reply

Cassie

#228061

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#228065

I would do something like this (but it might need to be inside a medai query to keep it applying to desktop only:

.searchandfilter[data-sf-form-id="13517"] {
  margin: 0 65px;
}
.searchandfilter[data-sf-form-id="13517"]  > ul > li {
  min-width: 300px;
}
.searchandfilter[data-sf-form-id="13517"]  > ul > li > label {
  min-width: 260px;
}

300px is the smallest you can use for them to be the same width, with the data terms you have inside the fields, and font size.

Add New Note to this Reply

Cassie

#228071

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#228073

It is Saturday today, so I am not supposed to be here today, but what you want to do would need Custom CSS, for which a mockup would be best.

For some reason, the form does not seem to want to center. I tried CSS to do this, but it would not, I suspect because the fields wrap and make more than one row. But, they are not in rows as such.

Until we release V3 (my guess is around early spring), any design of the form would need to be done manually with CSS.

Can you sketch out what you want with the other form?

Add New Note to this Reply

Cassie

#228082

Sorry Trevor… I do appreciate your help and certainly don’t expect a response on a Saturday if you’re not supposed to be there 😉

For some reason, the form does not seem to want to center. I tried CSS to do this, but it would not, I suspect because the fields wrap and make more than one row.

I think you’re right although I don’t have a problem with them wrapping, as long as they remain centred within the form.

I rather thought custom CSS was what we were discussing already (unless there’s a different way of handling the creation of the form?) and I’m not sure how I’d do a mockup as I can’t upload images here, but please don’t worry, I’ll have another bit of a play around with things myself and see what I can come up with.

Thank you again and have a good weekend.

Add New Note to this Reply

Trevor Moderator

#228084

You would need to make a screenshot, add annotation, upload it to a file sharing site and send me the link to the file.

Add New Note to this Reply

[Author]

Posts