Как выровнять поле значков по верху, взяв за основу компонент prifaces - PullRequest
Новая
       12

Как выровнять поле значков по верху, взяв за основу компонент prifaces

0 голосов
/ 08 ноября 2018

Как выровнять поле значка сверху - Primefaces 3.2 с JSF2.

Я имею дело со списком, который представляет сложную концепцию бизнес-логики на стороне пользователя. Таким образом, поле будет иметь иконку (ссылка с графическим изображением), которая вызовет объяснение, чтобы пользователь лучше понял концепцию. Проблема в том, что значок не остается выровненным в верхней части, принимая за высоту поля (выпадающий список). ниже приведен код и изображение текущего представления.

Код: 

<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
    <p:graphicImage library="images" name="information.png" width="16px"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
    showEffect="slide" hideEffect="slide" >
    <span style="white-space: nowrap">
        <h:outputText escape="false" value="#webcore_view['Informação']}"/>
    </span>
</p:tooltip>

Обратите внимание, что значок информации (i) выровнен по нижней части поля

Спасибо всем!

1 Ответ

0 голосов
/ 08 ноября 2018

Я объясню, как я решил эту задачу:

Я установил вертикальное выравнивание стиля непосредственно компонентом.

И было довольно просто, просто добавьте правильное выравнивание стиля: 

style="vertical-align: top;"

Правильный код выглядит так: 

<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
    <p:graphicImage library="images" name="information.png" width="16px"
        style="vertical-align: top;"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
    showEffect="slide" hideEffect="slide" >
    <span style="white-space: nowrap">
        <h:outputText escape="false" value="#webcore_view['Informação']}"/>
    </span>
</p:tooltip>

И правильная позиция такова:

...