Forums › Forums › Search & Filter Pro › S&F Horizontal the final solution
- This topic has 4 replies, 2 voices, and was last updated 8 years, 6 months ago by Anonymous.
-
Anonymous(Private) April 26, 2016 at 9:42 am #43911
Hi guys,
I’m trying to make an horizontal version of your S&F bar.I’m using 3 fields but it can be applied to more or less.
What I’ve done so far (I’ve did this css just for this specific S&F form):
.searchandfilter[data-sf-form-id="2545"] > ul > li { display:inline-block !important; } .searchandfilter[data-sf-form-id="2545"] li.sf-field-search { width: 40%; padding-right:10px !important; } .searchandfilter[data-sf-form-id="2545"] li.sf-field-tag { width: 40%; padding-right:10px !important; } .searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi { width: 100% !important; } .searchandfilter[data-sf-form-id="2545"] li.sf-field-category { width: 20% !important; } .searchandfilter[data-sf-form-id="2545"] select.sf-input-select { width: 100%; }
So far so good. I used % in order to fill the full width. I also added the 10px padding-right just to the first 2 elements.
The only issue I’m facing is that the tag field is formatted differently than the other 2 (different border, font size etc).
Also I would like to change this horizontal view for tables and smartphone to bring it back to 1 field per row.
Any advice?
link to my test page: test.degeneration.it
Anonymous(Private) April 26, 2016 at 10:13 am #43914Ok this is the final result with consistency:
.searchandfilter[data-sf-form-id="2545"] > ul > li { display:inline-block !important; } .searchandfilter[data-sf-form-id="2545"] li.sf-field-search { width: 40%; padding-right:10px !important; } .searchandfilter[data-sf-form-id="2545"] li.sf-field-tag { width: 40%; padding-right:10px !important; } /* format tag fields for consistency */ .searchandfilter[data-sf-form-id="2545"] .chosen-container-multi .chosen-choices { display: inline-block; height: 2.65em !important; margin-bottom: 0px; border: 1px solid #ddd; padding: 0 0.65em; font-size: 13px; line-height: normal; color: #555; background-color: #fff; border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); } .searchandfilter[data-sf-form-id="2545"] .chosen-container.chosen-container-multi { width: 100% !important; margin-top: -5px !important; } .searchandfilter[data-sf-form-id="2545"] input.default { border-color: rgba(0,0,0,0.3); outline: 0; outline: thin dotted \9; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.2); -webkit-transition: border linear 0.2s,box-shadow linear 0.2s; transition: border linear 0.2s,box-shadow linear 0.2s; } .searchandfilter[data-sf-form-id="2545"] li.sf-field-category { width: 20% !important; } .searchandfilter[data-sf-form-id="2545"] select.sf-input-select { width: 100%; }
Hope can help a lot of people that are trying to have an horizontal view for S&F.
Now I just need to edit the @media CSS for smartphones and tablets.
-
AuthorPosts