How to position input fields horizontally and not vertically? - php

Question

I have a wordpress register.php file from the buddyboss-platform(1.8.5).
And there are all input fields under each other, like this:
Lable Email
Input field email
lable password
input field password
But I want to have them next to each other. Like this
lable Email lable password
input field Email input field password
And of course I tried a lot. And googled a lot. But the input fields stay vertical and not horizontally
So this is the register.php file:
<?php
?>
<?php bp_nouveau_signup_hook('before', 'page'); ?>
<div id="register-page" class="page register-page">
<?php bp_nouveau_template_notices(); ?>
<?php bp_nouveau_user_feedback(bp_get_current_signup_step()); ?>
<form action="" name="signup_form" id="signup-form box" class="standard-form signup-form clearfix" method="post" enctype="multipart/form-data">
<?php if ('request-details' === bp_get_current_signup_step()) : ?>
<?php bp_nouveau_signup_hook('after', 'account_details'); ?>
<div class="register-section default-profile" id="basic-details-section">
<?php /***** Basic Account Details ******/ ?>
</div><!-- #basic-details-section -->
<?php bp_nouveau_signup_hook('after', 'account_details'); ?>
<?php /***** Extra Profile Details ******/ ?>
<?php if (bp_is_active('xprofile') && bp_nouveau_base_account_has_xprofile()) : ?>
<?php bp_nouveau_signup_hook('before', 'signup_profile'); ?>
<div class="register-section extended-profile" id="profile-details-section">
<?php /* Use the profile field loop to render input fields for the 'base' profile field group */ ?>
<?php while (bp_profile_groups()) : bp_the_profile_group(); ?>
<?php while (bp_profile_fields()) : bp_the_profile_field();
if (function_exists('bp_member_type_enable_disable') && false === bp_member_type_enable_disable()) {
if (function_exists('bp_get_xprofile_member_type_field_id') && bp_get_the_profile_field_id() === bp_get_xprofile_member_type_field_id()) {
continue;
}
}
?>
<div<?php bp_field_css_class('editfield');
bp_field_data_attribute(); ?> <fieldset>
<?php
$field_type = bp_xprofile_create_field_type(bp_get_the_profile_field_type());
$field_type->edit_field_html();
?>
</fieldset>
</div>
<?php endwhile; ?>
<input type="hidden" name="signup_profile_field_ids" id="signup_profile_field_ids" value="<?php bp_the_profile_field_ids(); ?>" />
<?php endwhile; ?>
<?php bp_nouveau_signup_form(); ?>
<?php bp_nouveau_signup_hook('', 'signup_profile'); ?>
</div><!-- #profile-details-section -->
<?php bp_nouveau_signup_hook('after', 'signup_profile'); ?>
<?php endif; ?>
</div><!-- //.layout-wrap -->
<?php bp_nouveau_signup_terms_privacy(); ?>
<?php bp_nouveau_submit_button('register'); ?>
<?php endif; // request-details signup step
?>
<?php bp_nouveau_signup_hook('custom', 'steps'); ?>
</form>
</div>
<?php bp_nouveau_signup_hook('after', 'page'); ?>
And I tried this in style.css
#box {
display: flex;
align-items: baseline;
}
#productSearch form input {
vertical-align: middle;
}
But that doesn't worked.
And A side note. I also saw in the downloaded buddyboss-platform that the register.php has after the closing </form> an ending </div>. But without opening div. Is that legal?
My question. What I have to change? So that the two fields will shown horizontal?

Answer 1

This is mostly a CSS issue as buddypress is applying its own style.
Try using this (if it doesn't work, apply a higher specificity):
#basic-details-section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 14px;
}
Higher specificity #register-page #signup-form #basic-details-section