Skip to Content Skip to Menu

Member Search Styling

  • bizguy
  • bizguy
  • OFFLINE
  • Posts: 197
  • Thanks: 32
  • Karma: 5
4 years 3 weeks ago #320731 by bizguy
Member Search Styling was created by bizguy
Is it possible to move the search function to the side-bar position, instead of it being located across the top of the page?

This is the styling I am looking to replicate.

Member Search Example

Thanks,

Ed

Please Log in or Create an account to join the conversation.

  • krileon
  • krileon
  • ONLINE
  • Posts: 48435
  • Thanks: 8275
  • Karma: 1443
4 years 3 weeks ago #320732 by krileon
Replied by krileon on topic Member Search Styling
Yes, you'll need to write custom CSS to make it columns like that though. That functionality is of course not built in. Recommend first setting "Hide Empty Searches" and "Collapse Search Criteria" to "No" under Parameters > Search of your userlist to get rid of the collapsing functionality. Example CSS below to force a column display.

Code:
.cbUsersList > form { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .cbUsersList > form > .cbUserListTitle, .cbUsersList > form > .cbUserListHead, .cbUsersList > form > .cbUserListPagination { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .cbUsersList > form > .cbUserListSearch { -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .cbUsersList > form > .cbUserListSearch > .cbUserListSearchTitle { display: none; } .cbUsersList > form > #cbUserTable { -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; }

The search criteria is using grid sizing of col-4 and the results grid sizing of col-8. This uses Bootstrap 4 sizes, but as it's just plain CSS you can adjust it to whatever you like. The scrolling behavior is something you'd need to implement specific to your site in addition to other styling improvements.


Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in or Create an account to join the conversation.

Moderators: beatnantkrileon
Powered by Kunena Forum