[recruitbk]

Hi,

I’ve done some minor customization to the profile edit.php page. I created a child theme and have made all my modifications to the edit.php that I replicated there (members > single > profile > edit.php).

I’ve created CSS to align custom fields in two different profile groups how I want them. The profile groups are basic information and contact information. In the edit.php, the while loop looks for all profile edit fields, which I hardcoded to only find the fields which I created for each profile group. The problem is, the loop is somehow finding hidden fields and causing a lot of white space after all of my hard coded fields before getting to the submit button. How can I change the loop so it doesn’t find all of the additional hidden fields that its trying to display in the white space. I looked at the page in firefox using firebug and I can see that bp is finding all editable fields & displaying them again after my hardcoding. This is causing the white space. Visit http://www.recruitbk.com & log in with jahmakan5@gmail.com password: test. Select Edit profile > click basic information tab. Scroll down and you’ll see all of the white space. Here is my code on edit.php:

`

<form action="” method=”post” id=”profile-edit-form” class=”standard-form “>

<!–removed code and replaced w/whats below—>

<?php

//$location= xprofile_get_field_data( “signup_email”);//fetch the location field for the displayed user
?>

<?php
global $bp;
$signup_type = get_user_meta($bp->displayed_user->id, ‘signup_email’, true);
echo $signup_type;
?>

<div>

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<textarea rows="1" cols="50" name="” id=””>

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<select name="” id=””>

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<select name="” id=””>

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<select name="” id=””>

<label for="”>
<select name="” id=””>

<label for="”>
<select name="” id=””>

<label for="”>
<select name="” id=””>

<label for="”>
<select name="” id=””>

<label for="”>
<select name="” id=””>

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<select name="” id=””>

<label for="”>
<select name="” id=””>

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

Athletic Information

<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value=" ” />

`

Here is an example of the div ids I use to reposition the fields:

`form.standard-form #edit-profile-right-column-middlename {
position: relative;
width:50%!important;
left:25%;
top:-73px;
}

form.standard-form #edit-profile-right-column-lastname {
position: relative;
width:50%!important;
left:50%;
top:-150px;
}`

[Fee]

the login data are wrong. maybe you can try with css.

one tipp: use php comments instead of html comments, it’s much cleaner. instead of:

Code:

<!–removed <php bp_profile_group_tabs(); ?> code and replaced w/whats below—>

use:

Code:

<?php // removed bp_profile_group_tabs(); code and replaced w/whats below ?>

or:

Code:

<?php /* removed
bp_profile_group_tabs();
code and replaced w/whats below */ ?>

[recruitbk]

login username is just jahmakan5 password:test
I’ll replace the html comments, but thats not affecting the white space. Its the hidden fields for sure.

[recruitbk]

Any help here?

[pcwriter]

@recruitbk

The problem you’re having is with inappropriate css. Using negative `top` values for every individual element simply pulls the element upwards, out of its designated “space”, while leaving that space blank. For example: `edit-profile-right-column-vertical` has a negative top value of -1019px which leaves 1019px blank below it (where the element would normally appear had it not a negative top value).

A better layout would be to first remove all `position:relative` and `top` values from individual elements in your css. In your html, wrap each group of elements you want to display on the same line in a wrapper div (ex: div#name-wrap). Next, apply `display:inline-block` to each element within the wrapper div. To finish, simply adjust width, padding and margins to get everything nicely aligned. Example below:
`
#name-wrap {
width:100%;
}
#name-wrap #edit-profile-right-column-firstname, #name-wrap #edit-profile-right-column-middlename, #name-wrap #edit-profile-right-column-lastname {
display:inline-block;
width:30%;
margin-right:2%;
}
`

Hope this helps!

[recruitbk]

@pcwriter: thanks for your help, still having some trouble displaying. I think the trouble is lying within the
on the edit.php where all of these fields are displaying. I added a border to the wrapper just to see what was happening. It looks like the loop is actually looping the profile-wrap, even though I only have it for first name, middle name, last name. I tried removing the while loop all together, and then no fields are visible. Any ideas on what I can do here?

`#profile-wrap{
width:100%;
border:1px solid #dbdbdb;
}

#profile-wrap #edit-profile-right-column-firstname, #profile-wrap #edit-profile-right-column-middlename, #profile-wrap #edit-profile-right-column-lastname{
display:inline-block;
width:50%;
margin-right:2%;
}`

In my html, I’m referencing as shown below , but BP is just defaulting to the standard profile page formatting putting those 3 fields one below each other instead of on the same line. You can login again and see what I mean (un: jahmakan5 , pw:test)

`

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

<label for="”>
<input type="text" name="” id=”” value=”” />

`

[recruitbk]

Can anyone help here pleaseee!!

[pcwriter]

@recruitbk

Sorry for not replying sooner, didn’t see this thread was updated

You’ve set the width too big. You’re trying to fit 3 elements side-by-side, but each has a width set at 50% with a margin of 2%. That makes a total width of 52%. No matter what you do, only 1 will fit on any given line (trying to add another element with 52% width will simply bump it to the next line). The grand total of all elements, including padding and margins, should not exceed 100%. Setting the width to 30% and margin at 2% for the 3 will total 96%. Try adjusting as per the following:

`#profile-wrap #edit-profile-right-column-firstname, #profile-wrap #edit-profile-right-column-middlename, #profile-wrap #edit-profile-right-column-lastname{
display:inline-block;
width:.30%;
margin-right:2%;
}`

[pcwriter]

@recruitbk

Just reread the 2nd part of your last post.

Use your original html. That worked… the only things missing are the new wrapper divs that need to be added for each section, then the simpler css.