I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing as shown in the image below:
Here is the code structure:
apidefs-disp.component.html
<div class="flex-disp-apidefs-container">
<div class="flex-disp-apidefs-list">
<kdc-apidefs-list></kdc-apidefs-list>
</div>
<div class="flex-disp-apidefs-form">
<kdc-apidefs-form></kdc-apidefs-form>
</div>
</div
apidefs-form.component.html
<div class="row">
<!-- Name -->
<div class="col">
<div class="md-form">
<input required type="text" id="materialapidefsFormName" class="form-control"
aria-describedby="materialapidefsFormNameHelpBlock" mdbInput formControlName="name" />
<label for="materialapidefsFormName">Name</label>
<mat-error
*ngIf="apidefsForm.controls['name'].hasError('required') && apidefsForm.controls.name.touched">
Name is required
</mat-error>
<mat-error
*ngIf="apidefsForm.controls['name'].hasError('maxLength') && apidefsForm.controls.name.touched">
maximum Length is 25
</mat-error>
</div>
</div>
<!-- Description -->
<div class="col">
<div class="md-form">
<input required type="text" id="materialapidefsFormDescription" class="form-control"
aria-describedby="materialapidefsFormDescriptionHelpBlock" mdbInput
formControlName="description" />
<label for="materialapidefsFormDescription">Description</label>
<mat-error
*ngIf="apidefsForm.controls['description'].hasError('required') && apidefsForm.controls.description.touched">
Description is required
</mat-error>
<mat-error
*ngIf="apidefsForm.controls['description'].hasError('maxLength') && apidefsForm.controls.description.touched">
maximum Length is 50
</mat-error>
</div>
</div>
</div>
[... snip ...]
apidefs-disp.component.scss
.flex-disp-apidefs-container {
display: flex;
flex-direction: row;
width: 100%;
flex: auto;
}
.flex-disp-apidefs-list {
display: flex;
flex-direction: column;
//width:100%;
flex:2;
}
.flex-disp-apidefs-form {
display: flex;
flex-direction: column;
//width: 100%;
flex:4;
}
apidefs-list.component.scss
NOTHING
apidefs-form.component.scss
.text-center {
width: 100%;
}
.flex-apidefs-form{
display:flex;
width: 100%;
padding: 30px;
background-color: var(--accent-lighter-color);
}
QUESTION: Is there a way to reduce the vertical space between two sets of input fields?
Any assistance, suggestions, or tips would be highly appreciated.
TIA
ETA I recently encountered an issue while trying to copy the code to Stackblitz (seems like it's related to a paid product - unsure if it should be included in StackBlitz).
Looking for solutions to address this problem...