Posted
by
Forums › Forums › Search & Filter Pro › Align Submit button to bottom in horizontal layout
Trevor.
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!
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.
Hello Trevor, I’ve uploaded the design here: screenshot.
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?
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;
}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.