SelectOneMenu label not visible but triangle icon display not aligned with OutputText

[schlebe]

In my J2EE application I use a <h:outputText> and a <p:selectOneMenu> as in the following code

Code: Select all

<h:outputText  
    id="txtTplOriginator"
    value="TPL-ORIGINATOR"  
    style="width:240px; padding:0px; margin:0px;"
    />

<p:selectOneMenu
    autoWidth="false"
    id="cmbTplOriginator" 
    value="TEST" 
    style="margin-left:0px; margin-top:0px; width:240px;"
    styleClass="hide-label"
    >

where hide-label CSS style is defined like this

Code: Select all

.hide-label .ui-selectonemenu-label
    {
    display: none;
    }

The purpose of hide-label is too hide SelectOneMenu Label.

when hide-label CSS is NOT activated, the 2 widgets are display on the same line.

When hide-label is used, only the Triangle Icon in a rectangle is displayed, label is hidden.

... but Triangle Icon is displayed 20 or 20 pixel lower that previously when Label is visible.
It is not more aligned with <h:outputText>

Is that a bug ?

[tandraschko]

You can not just add display:none on some elements and hope the style will be the same.
Analyse our styles and overwrite it correctly.

[schlebe]

Hello Tandraschko,

I have analyzed the HTML and I find that all is well done.

The only strange thing is that <p:input> tag is not correctly closed, but I have only tested with Primefaces 6.1.14.

You can see part of my HTML code in viewtopic.php?f=3&t=54861

In resume, I have the following "pseudo" code

Code: Select all

<div> = Panel
	<span> = OutputText
		Axandre LE GRAND(<a href="http://..." target="userinfo">NEN5558</a>)
	</span>
	<div> = SelectOneMenu 
		<div class="ui-helper-hidden-accessible">
			<input>
		</div>
		<div class="ui-helper-hidden-accessible">
			<select>
				<option value="LINE 1"></option>
			</select>
		</div>
#		<input 
			type="text" 
			name="formInputActionDialog:cmbTplOriginator_editableInput" 
			class="ui-selectonemenu-label ui-inputfield ui-corner-all" 
			value="Alexandre LEGRAND"
			>
$		<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
			<span class="ui-icon ui-icon-triangle-1-s ui-c">
			</span>
		</div>
	</div>
	<button>
		<span class="ui-button-text ui-c">Add ORIGINATOR</span>
	</button>
</div>

If I hide <input> part prefixed by # in previous code, the <div> part prefixed by $ is not corectly displayed.

I don't see how I can do to solve my problem ?

[schlebe]

I have changed CSS like this

Code: Select all

.hide-label .ui-selectonemenu-label
    {
    /* display: none; */
    width:18px;
    }
.hide-label
    {
    width:4px;
    }

and now just icon button is visible correctly aligned.