Почему jsf <h: inputHidden ../> занимает пространство на экране?

Question

Среди большинства компонентов на моем экране я использовал h:inputHidden на моей странице xhtml, так как мне нужно было скрытое поле для хранения/обновления значения поля bean.

<h:inputHidden id="calendarValueHidden" value="#{myCdiBean.calValue}"/> 

Несмотря на то, что не видно, но я не знаю, почему это занимает место на экране, который нарушенный другие компоненты страницы. Даже display:none !important не работает с входным скрытым компонентом.

Answer 1

Симптомы проблемы указывают на ошибку общего стартера: объявить его непосредственным ребенком <h:panelGrid>. Как так:

<h:panelGrid columns="1"> 
    <h:inputText ... /> 
    <h:inputText ... /> 
    <h:inputHidden ... /> 
    <h:inputText ... /> 
</h:panelGrid> 

<h:panelGrid> генерирует HTML <table> и as documented, это поставит каждый непосредственный ребенок в своей ячейке таблицы <td>. Сгенерированный HTML выглядит следующим образом:

<table> 
    <tbody> 
     <tr><td><input type="text" /></td></tr> 
     <tr><td><input type="text" /></td></tr> 
     <tr><td><input type="hidden" /></td></tr> 
     <tr><td><input type="text" /></td></tr> 
    </tbody> 
</table> 

<td> имеет по умолчанию некоторые поля и отступы, которая полностью объясняет вашу проблему. Вы должны были заметить это при проверке вывода HTML и стилей CSS в встроенном наборе инструментов разработчика (нажмите F12 или rightclick, Inspect Element).

Вы в основном хотите сгруппировать <h:inputHidden> вместе с нужным <h:inputText> внутри той же ячейки таблицы. Вы можете использовать для этого <h:panelGroup>.

<h:panelGrid columns="1"> 
    <h:inputText ... /> 
    <h:panelGroup> 
     <h:inputText ... /> 
     <h:inputHidden ... /> 
    </h:panelGroup> 
    <h:inputText ... /> 
</h:panelGrid> 

Это в конечном итоге в сгенерированном выходе HTML, как показано ниже, именно так, как вы intented:

<table> 
    <tbody> 
     <tr><td><input type="text" /></td></tr> 
     <tr><td><input type="text" /><input type="hidden" /></td></tr> 
     <tr><td><input type="text" /></td></tr> 
    </tbody> 
</table> 

---

неродственных к конкретной задаче, используя таблицы для разметки и позиционирования плохо , Используйте divs и CSS.

Answer 2

Проблема заключается в том, что я помещал скрытое поле внутри сетки панели сразу после компонента, значение которого оно удерживает. Я вытащил его из сетки панели и поместил его в конец перед тегом form. Задача решена.

Похоже, что сетка панели не занимает скрытое поле для фактически буквально несуществующего компонента. Он по-прежнему подсчитывается панельной сеткой, потому что он все еще находится в доме. Для того чтобы элемент был несчетным элементом в панельной сетке, он должен быть незагруженным (rendered="false"). Но тогда он также становится полностью недоступным, и его ценность не будет доступной, поскольку ее больше нет в доме.