# Primefaces sieht grausam aus



## Zingel (22. Feb 2011)

Hallo,

ich bin relativ neu bei der Entwicklung mit JSF. Ich habe eine kleine Seite mit Primefaces erstellt (Version 2.2.1). Sie funktioniert soweit auch. Nur sieht sie grausam aus. Alle PrimeFaces Komponenten sind viel zu groß. Die buttons sind beispielsweise doppelt so hoch wie ein h:commandButton.

Hier mal ein wenig Code.

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">

<f:view contentType="text/html">
  <h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/NKManager.css" />
    <title>#{translator.title_login}</title>
  </h:head>

  <h:body>
    <center>
      <h1>#{translator.headline_login}</h1>
      <h:form>
        <h:panelGrid columns="2">
          <h:outputText value="#{translator.username}:"></h:outputText>
          <p:inputText value="#{userBo.username}"></p:inputText>
          <h:outputText value="#{translator.password}:"></h:outputText>
          <p:password value="#{userBo.password}"> </p:password>
          <p:commandButton value="#{translator.cancel}"></p:commandButton>
          <p:commandButton action="#{userBo.validateUser}" value="#{translator.login}" ajax="false"></p:commandButton>
        </h:panelGrid>
      </h:form>
    </center>
  </h:body>
</f:view>
</html>
```

Ändere ich *h:head* in *head*, sieht alles zwar deutlich besser aus, jedoch bekomme ich dann den folgenden Fehler
*
INFO: WARNUNG: FacesMessage(s) wurde(n) in die Warteschlange gestellt, aber möglicherweise nicht angezeigt.
sourceId=null[severity=(ERROR 2), summary=(Eine oder mehrere Ressourcen haben das Ziel 'head', aber es wurde keine Komponente 'head' in der Ansicht definiert.), detail=(Eine oder mehrere Ressourcen haben das Ziel 'head', aber es wurde keine Komponente 'head' in der Ansicht definiert.)]
*

Ausserdem funktionieren dann nicht mehr alle PrimeFaces Komponenten, wie sie sollen.

Was mache ich falsch?

Danke,
 Zingel


----------



## Deadalus (23. Feb 2011)

Einfach mal die folgenden css Klasse ins Projekt übernehmen. 

.ui-widget,
.ui-widget .ui-widget {
    font-size: 12px !important;
}

oh und natürlich bei h:head bleiben sonst machst du die komplette Anwendung kaputt


----------

