label align-issue with horizontal forms
Posted: 09 Oct 2019, 08:44
When we look at https://www.primefaces.org/babylon/sample.xhtml labels are aligned at the top-left corner of the input. This is not ideal. The labels should be aligned at the baseline.
This issue also applies to the PrimeNG-variant of this theme. And it applies to other themes like Manhattan or Olympia.
When we look to https://getbootstrap.com/docs/4.3/compo ... ontal-form they solve this issue by offering the CSS-Class .col-form-label which add´s padding-top.
PrimeFlex offers CSS-class p-align-baseline to get this done right. But this has (at least) issues with SelectOneMenu:
I don´t think this is something primeflex can solve.
p-align-baseline uses CSS property align-items: baseline. This may work for native browser html-(input-)elements, but not for custom components drawn via a UI-component-library.
What's your opinion on this topic?
This issue also applies to the PrimeNG-variant of this theme. And it applies to other themes like Manhattan or Olympia.
When we look to https://getbootstrap.com/docs/4.3/compo ... ontal-form they solve this issue by offering the CSS-Class .col-form-label which add´s padding-top.
PrimeFlex offers CSS-class p-align-baseline to get this done right. But this has (at least) issues with SelectOneMenu:
Code: Select all
<h3>Responsive (PrimeFlex, p-align-baseline)</h3>
<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="p-align-baseline ui-fluid">
<p:outputLabel for="text1" value="Text 1" />
<p:inputText id="text1" />
<p:outputLabel for="text2" value="Text 2" />
<p:inputText id="text2" />
<p:outputLabel for="date" value="Date" />
<p:datePicker id="date" showIcon="true" style="width:auto" />
<p:outputLabel for="checkbox" value="Checkbox" />
<p:selectBooleanCheckbox id="checkbox" itemLabel="Checkbox" />
<p:outputLabel for="text3" value="Text " />
<p:inputText id="text3" />
<p:outputLabel for="selectOne" value="SelectOne (misaligned)" />
<p:selectOneMenu id="selectOne">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
</p:panelGrid>p-align-baseline uses CSS property align-items: baseline. This may work for native browser html-(input-)elements, but not for custom components drawn via a UI-component-library.
What's your opinion on this topic?
Did you try the above solution?
