Buddypress xprofile edit width

I am using WordPress 3.5.1 and Buddypress 1.7.

I am using the Buddypress extended profile fields and am having issues with the display when editing profile fields. For example, I have a state list where the user can check what states apply to them (checkbox type field). This is currently a vertical list so it displays 52 options straight down. What I need to do is have the ability to display large profile options like this in a horizontal format so the fields list left to right and continue on the next line. I am not sure where to edit to make this change specifically.

I am using the child theme Frisco – Buddypress if that helps.

Thanks in advance

  • PC
    • WPMU DEV Initiate

    Hiya @myptb2013

    Greetings and thanks for posting on the forums.

    Can you please provide me a link to the site where I can register and see how it is appearing right now ?

    That is something which will require some custom modification so just wanted to know if you tried to use the BuddyPress forums by any chance ?

    Please advise.

    Cheers, PC

  • myptb2013
    • WPMU DEV Initiate

    Unfortunately the site is on an ip address restricted server and currently accessible in our building, But, I took a screen shot of the current way it displays when editing the profile here: Click here for ScreenShot

    The way we need it to display is like below:

    [ ] Alabama [ ] Alaska [ ]Arizona etc. etc.

    We have some pretty long option choices, I am also using the s2Member plugin but decided that even though its easier to build the fields for the profile, I have to use the xprofile fields built into Buddypress since there is NO easy way to search and display the profile data for the scatter meta format that s2member stores it.

    We need it to display length wise vs height wise as seen in the current.png screenshot.

    I hope this help explain it a little better, I appreciate any and all input!

  • PC
    • WPMU DEV Initiate

    Hiya @myptb2013

    Greetings and thanks for the screenshot and sorry for the delay on this one.

    I have tagged our lead developer @Vladislav on this on for his expert advice on this issue.

    He should be here sooner than later.

    Cheers, PC

  • Vladislav
    • Dead Eye Dev

    Hello,

    Perhaps you could solve this with some quick CSS? Suppose your field with multiple checkboxes is named "xproftest" - in that case, something like this should show the checkboxes next to each other:

    .field_xproftest .checkbox label {
    	display: inline;
    }

    To get the selectors just right, perhaps you'll want to use a tool like Firebug or Chrome Inspector. If you need a bit more custom output, that can also be done with just a bit of custom coding. There's the filter called for each checkbox, named "bp_get_the_profile_field_options_checkbox". The function bound to this filter can take a number of parameters, and it's expected to return the HTML for the checkbox.

  • PC
    • WPMU DEV Initiate

    Hiya,

    I hope you are doing well with your health now. Sorry for the delay as I was away for a few days.

    I will have a look at the site if you can provide me a link to the page where the list appears ?

    Please advise.

    Cheers, PC

  • myptb2013
    • WPMU DEV Initiate

    Sure, please go to http://secure.myprojectteambuilder.com

    login with this demo user account:

    username: demouser
    password: demo1234

    when your logged in, you can go to this url to see how the profile fields are displaying versus left to right. They are one single line straight down right now:

    http://secure.myprojectteambuilder.com/members/demouser/profile/edit/group/16/

    I don't mind giving this out in the fourm since the site is in test mode.

  • PC
    • WPMU DEV Initiate

    Hiya @myptb2013

    Thanks for the info.

    Sorry for the delay in response on this one as for some reasons it did not appear in my feed.

    I am looking into now and will seek some suggestion from Ve if required.

    Cheers, PC

  • PC
    • WPMU DEV Initiate

    Hiya,

    I tested it (Not with the details you provided as that did not work, but with the account I signed up for)

    The attached screenshot shows how it appears to me

    The states are not appearing as checkboxes but drop downs.

    Did you change the setup ?

    Please advise.

    Cheers, PC

  • PC
    • WPMU DEV Initiate

    Hiya,

    What is the name of the .css file where I need to make the change.

    That depends on the theme. Generally themes use style.css which you can modify it in.

    However, you can use a plugin like : http://wordpress.org/extend/plugins/imporved-simpler-css/ to add the CSS code.

    Please note that adding the code as it is will not help.

    Perhaps you could solve this with some quick CSS? Suppose your field with multiple checkboxes is named "xproftest" - in that case, something like this should show the checkboxes next to each other:

    .field_xproftest .checkbox label {
    	display: inline;
    }

    To get the selectors just right, perhaps you'll want to use a tool like Firebug or Chrome Inspector. If you need a bit more custom output, that can also be done with just a bit of custom coding. There's the filter called for each checkbox, named "bp_get_the_profile_field_options_checkbox". The function bound to this filter can take a number of parameters, and it's expected to return the HTML for the checkbox.

    So you will need to first identify what is the field name for multiple checkboxes.

    Cheers, PC

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.