PrimeNg 表单输入布局：如何处理？

Question

我正在使用 Angular 17 和 PrimeNg 17 开发一个应用程序，我正在尝试弄清楚如何处理表单输入对齐。

PrimeNg 网站的“入门”部分没有提供有关如何创建表单布局的指示。

即使是 PrimeFlex 网站的

FormLayout 部分也无能为力，因为它显示了输入类（大量）的示例，而没有任何解释。

此外，如果我尝试将相同的类列表与组件（即日历）而不是基本输入一起使用，它不会像输入文本那样对齐。

使用以下代码：

<div class="formgrid grid">
    <div class="field col">
        <label for="firstname">Firstname</label>
        <input id="firstname" type="text" class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full">
    </div>
    <div class="field col">
        <label for="monthRange">Month Range</label>
        <p-calendar id="monthRange" [(ngModel)]="date" view="month" dateFormat="mm/yy" selectionMode="range"></p-calendar>
    </div>
</div>

结果我得到以下布局（这取决于屏幕尺寸）：

如您所见，它不像 PrimeFaces 示例页面中显示的输入文本那样对齐。

我还尝试寻找使用 PrimeNg 设置表单布局的不同方法，就像

这个旧游乐场（Angular 13 和 PrimeNg 13）所做的那样，但它似乎不适用于最新版本的 PrimeNg。

有什么想法吗？有什么建议吗？

Answer 1

刚刚将

p-fluid

 类添加到父 div 并且它起作用了（并删除了文本输入类中的所有内容）。

<div class="formgrid grid p-fluid">
    <div class="field col">
        <label for="firstname">Firstname</label>
        <input id="firstname" type="text">
    </div>
    <div class="field col">
        <label for="monthRange">Month Range</label>
        <p-calendar id="monthRange" [(ngModel)]="date" view="month" dateFormat="mm/yy" selectionMode="range"></p-calendar>
    </div>
</div>