label align-issue with horizontal forms

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
christophs78
Posts: 85
Joined: 01 Mar 2018, 12:29

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.
Image

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:
Image

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>
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?
Last edited by christophs78 on 11 Oct 2019, 13:00, edited 1 time in total.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

11 Oct 2019, 09:56

Hi,

What is the styleClassContent? I didn't find it in 7.1-SNAPSHOT.

Please try;

Code: Select all

<style type="text/css">
   .customPanelGrid .ui-panelgrid-content {
            align-items: center;
    }
</style>

<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" styleClass="customPanelGrid">

christophs78
Posts: 85
Joined: 01 Mar 2018, 12:29

11 Oct 2019, 13:02

Sorry. We renamed styleClassContent to contentStyleClass during the PR.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

14 Oct 2019, 08:17

No problem ;) Did you try the above solution?

christophs78
Posts: 85
Joined: 01 Mar 2018, 12:29

14 Oct 2019, 20:43

align-items: center is not (pixel-)perfect but quite good.
Image

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

23 Oct 2019, 10:07

Thanks a lot for the update!
align-items: center is not (pixel-)perfect but quite good.
- it completely aligns the browser. :D

Also, thanks a lot for your contribution! PanelGrid became more flexible with flexbox.

Best Regards,

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests