Forums › Forums › Search & Filter Pro › Align Submit button to bottom in horizontal layout

Viewing 10 posts - 1 through 10 (of 10 total)
  • Anonymous
    (Private)  August 5, 2020 at 1:50 pm #255151

    Hi there. Is it possible to align the submit button to the bottom of the horizontal layout?
    I’ve got three columns now, one with categories, one with tags and one with the submit button. It would be great to have that button align on the bottom with the baseline of the lowest category or tag.

    Thanks!

    Trevor
    (Private)  August 5, 2020 at 2:22 pm #255160

    Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?

    I would also need a live link/URL to your search page.

    Anonymous
    (Private)  August 6, 2020 at 11:18 am #255234

    Hello Trevor, I’ve uploaded the design here: screenshot.

    Trevor
    (Private)  August 6, 2020 at 5:06 pm #255273

    OK, but I will need a live link/URL to your search page, so I can write the CSS.

    Anonymous
    (Private)  August 6, 2020 at 5:15 pm #255275

    Great, thank you. I’ll create a link tomorrow.
    Is that ‘submit’ button needed for certain platforms when using checkboxes (older browser, older or specific mobiles/tablets) if we’re not using Ajax, or is is only used for open search queries? Or do those checkboxes always automatically restart the search process without the button?

    Trevor
    (Private)  August 6, 2020 at 5:25 pm #255277

    You don’t need a submit button if you have Auto Submit ON. Some users want the submit button instead of Auto Submit, to allow the site user to make a number of choices before it submits, otherwise the form submits every time a choice is made.

    Anonymous
    (Private)  August 24, 2020 at 3:49 pm #257143
    This reply has been marked as private.
    Trevor
    (Private)  August 25, 2020 at 10:22 am #257213

    Does it now look as you want?

    The horizontal CSS is changed to this:

    .searchandfilter > ul {
margin-left: 0;
display: flex;
}
.searchandfilter > ul > li {
padding: 0px 40px 0px 0px;
}
.searchandfilter > ul > li.sf-field-submit {
align-self: flex-end;
}
.searchandfilter > ul > li.sf-field-submit input {
justify-content: flex-end;
}
    Anonymous
    (Private)  August 25, 2020 at 11:46 am #257220

    Ah, great! Thanks for your help.
    Based on this I’ve made some design changes. I’ll post it here since it might help someone else.

    .searchandfilter > ul {
margin-left: 0;
display: flex;
}
.searchandfilter > ul > li {
padding: 0px 40px 0px 0px;
}
.searchandfilter > ul > li.sf-field-submit {
align-self: flex-end;
margin-bottom: 4px;
}
.searchandfilter > ul > li.sf-field-submit input {
justify-content: flex-end;
border: 1px solid #265aa6;
border-radius: 5px;
background: #fff;
color: #265aa6;
padding: 5px 22px 5px 22px;
}

    Best regards, Haiko.

    Trevor
    (Private)  August 25, 2020 at 11:47 am #257224

    Ah. That looks good. Thanks for sharing. I will close this thread for now.

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