CODEWITHSUNDEEP
htmlcssjsfjsf-2primefaces
ScreamingTree
ScreamingTree

Reputation: 312

Primefaces CSS Header too big

I have an primefaces page with facelets, everything works fine. At the header.xhtml the Code is:

    <div class="title ui-widget-header ui-corner-all" style="display: table;overflow: hidden;width:100%">
        <div style="display: table-cell; vertical-align: middle">
            <h:graphicImage library="images" name="apo48.png" />
        <font size="6">Usermanagement und Selfcare</font>
        </div>
        <div style="display: table-cell;vertical-align: middle;text-align:right;">
            <h:outputText value="Willkommen #{login.user}"/><br/>
            <h:commandLink action="#{login.logout}" value="Logout"/>
        </div>
    </div>

So also the header looks fine, but there is a vertical scroll bar under the header. It seems like the header is one or two px to big. But why is its this way and what can I do?

enter image description here

EDIT Okay a complete example: I have the layout.xhtml 

<ui:debug hotkey="x" rendered="#{facesContext.application.projectStage == 'Development'}" />
<p:layout fullPage="true">
    <p:layoutUnit position="north" style="border: 0;">
        <ui:include src="../header/header.xhtml"/>
    </p:layoutUnit>
    <p:layoutUnit position="west" style="border: 0;">
        <ui:include src="../menu/navigation.xhtml"/>
    </p:layoutUnit>
    <p:layoutUnit position="center" style="border: 0;">
        <ui:insert name="content"/>
    </p:layoutUnit>
</p:layout>

With the CSS 

    .ui-widget, .ui-widget .ui-widget {
    font-size: 95% !important;
    }
    .ui-datatable tbody td.wrap {
    white-space: normal;
    }
    .unresizable {
    resize: none;
    }

In the north layoutunit is the code mentioned above.

Upvotes: 2

Views: 1554

Answers (1)

Honza Sedloň
Honza Sedloň

Reputation: 374

There are two unit that can be used to set the width and height relative to the viewport size (window size) vh and vw. For setting the height and width of header you can do this

.title{
  height: 20vh;
  width: 90vw;
}

This code will set height of .title to 20% of window height. Or you can easy set 

body{
  height: 100vh;
  width: 100vw;
}

See also:

Upvotes: 2

Related Questions