[Tony]

Hi… The search input field in the BuddyPress members directory is unusable [IMHO] with Attitude. I have tried deactivating all plugins except BuddyPress and bbPress but that makes no difference.

If you follow this link to my test site, you will see the members directory using the Twenty Sixteen theme. Note that the Search Members… field is visible and usable just above the All Members bar. [The Twenty Sixteen theme will only remain while this support request is open.]

Now go to my live site which is using Attitude. The field where you enter the search terms is nowhere to be seen, although the Search button is visible, albeit baldly placed.

This is the same on medium and small screen layouts. I have looked at the html generated by the two themes and it looks the same, but presumably there is something up with the css? I am not expert in this, so if you can help or point me to the right place, I would be very grateful. Thanks in anticipation, Tony

[Theme Horse Support Team]

hi Tony,

Use below Custom CSS to show search field

#buddypress div.dir-search {
    margin: inherit;
}

If this doesnot work then try using

#buddypress div.dir-search {
    margin: inherit !important;
}

Thank you

[Tony]

Brilliant! The first worked.

My test site is now back on Attitude (actually via my Attitude Child theme). The search field is on a line above the button and also the Order By: is on a line above the select box. This uses unnecessary vertical space. With the Twenty Sixteen theme the search field appears on the same line as the search button and the Order by: label on the same line and before the select box. I think Attitude should follow this arrangement.

If you feel this is beyond your support duty, could you give me some pointers what to do or where to look?

thank you for your excellent help.

[Theme Horse Support Team]

Hi Tony,

Add below Custom CSS to fix the display issue:

#buddypress div.dir-search,
#buddypress input[type=submit] {
    margin: 0;
}
#buddypress div.dir-search input[type=text] {
    margin-bottom: 10px;
    padding: 10px;
    width: inherit;
}

Thank you!

[Tony]

That’s fixed the search field so it is on the same line as the search button – great!

The Order by: label is still above the dropdown menu rather than to its left as in Twenty Sixteen. Is it possible to fix that too?

thank you, Tony

[Theme Horse Support Team]

Hi Tony,

Add below custom css to display Order by: label and dropdown menu in the same line.

#buddypress div.item-list-tabs ul li.last select {
    width: inherit;
}

Thank you!

[Tony]

That’s all fine now and gone live.

Thanks for your great help.

Tony

[Theme Horse Support Team]

Welcome anytime. 🙂

[Author]

Posts