Customizing profile edit.php page problems with white space
-
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 “>
<?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;
}`
-
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!
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%;
}`
- The topic ‘Customizing profile edit.php page problems with white space’ is closed to new replies.
