Forums › Forums › Search & Filter Pro › Aligning fields in search form

Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Anonymous
    (Private)  November 28, 2019 at 4:31 pm #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.

    Trevor
    (Private)  November 28, 2019 at 7:01 pm #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.

    Trevor
    (Private)  November 28, 2019 at 7:02 pm #227958
    This reply has been marked as private.
    Anonymous
    (Private)  November 30, 2019 at 8:06 am #228061
    This reply has been marked as private.
    Trevor
    (Private)  November 30, 2019 at 9:43 am #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.

    Anonymous
    (Private)  November 30, 2019 at 10:35 am #228071
    This reply has been marked as private.
    Trevor
    (Private)  November 30, 2019 at 10:48 am #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?

    Anonymous
    (Private)  November 30, 2019 at 11:17 am #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.

    Trevor
    (Private)  November 30, 2019 at 12:39 pm #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.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)