No space between outlined form fields in dialog - solved

[chrishj]

I have a form within a dialog and a card using a react-hook-form component.The label of the subsequent field has no space after the outline of the preceding field.
Please advise how to get a 1rem gap between the fields.

Many thanks

Code: Select all

<Dialog
				visible={chargeDialog}
				style={{ width: '450px' }}
				header="Edit Delivery charge"
				modal
				className="p-fluid"
				//footer={brandDialogFooter}
				onHide={hideChargeDialog}>
				<form onSubmit={handleSubmit(onSubmit)} className="p-fluid">
					<div className="flex justify-content-center">
						<div className="card">
							<div className="field">
								<span className="p-float-label">
									<Controller
										name="vendor.name"
										control={control}
										render={({ field, fieldState }) => (
											<InputText
												id={field.name}
												{...field}
												autoFocus
												disabled={true}
												className={classNames({
													'p-invalid': fieldState.error,
												})}
											/>
										)}
									/>

									<label
										htmlFor="vendor.name"
										className={classNames({ 'p-error': errors.vendor?.name })}>
										Vendors
									</label>

									{getFormErrorMessage('vendor.name')}
								</span>
							</div>

							<div className="field">
								<span className="p-float-label">
									<Controller
										name="uom"
										control={control}
										rules={{ required: 'UOM is required.' }}
										render={({ field, fieldState }) => (
											<InputText
												id={field.name}
												{...field}
												autoFocus
												className={classNames({
													'p-invalid': fieldState.error,
												})}
											/>
										)}
									/>
									<label
										htmlFor="uom"
										className={classNames({ 'p-error': errors.uom })}>
										UOM
									</label>
									{getFormErrorMessage('uom')}
								</span>
							</div>
									</div>
					</div>
					<div className="flex flex-row">
						<Button
							label="Cancel"
							icon="pi pi-times"
							className="p-button-text"
							onClick={hideChargeDialog}
						/>
						<Button
							label="Save"
							type="submit"
							icon="pi pi-check"
							className="p-button-text"
							//onClick={saveBrand}
						/>
					</div>
				</form>
			</Dialog>

Solution:
Update span to the below

Code: Select all

<span className="p-float-label mb-5">