# CommandButtons haben unterschiedliche Größe



## Rallenaldo (11. Mrz 2015)

Hi.

Ich habe folgendes Problem mit PrimeFaces und JSF. Ich hätte gerne, dass <h:commandButton> und <p:commandButton> den exat selben Style haben.

Hierzu habe ich in der CSS Datei folgendes angegeben:


```
form input.formbutton, 
form .ui-button{

border: none !important;
    border-radius: 0px !important;
    background: none repeat scroll 0 0 #7cd602 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 0.8em !important;
    font-family: Arial, Helvetica, sans-serif !important;
    letter-spacing: 1px !important;
    overflow: visible !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor:pointer !important;

}
```

Allerdings unterscheiden sich die Buttons in der Höhe und in den Abmessungen. Die Unterschiede bestehen auch, wenn im Button selbst, der gleiche Text steht. 

Kann mir jemand bei diesem Problem helfen?


----------



## stg (11. Mrz 2015)

Nimm doch einfach die gleichen style-classes, die auch für den p:commandButton benutzt werden...

Oder aber, wieso nimmst du nicht einfach überall den PrimeFaces commandButton?


----------



## Rallenaldo (12. Mrz 2015)

Hi.

Als styleClass nehme ich formbutton, allerdings tut sich da bei mir nix.

Ich nehm unterschiedliche Buttons, weil mir die Abmessungen von h:commandButton etwas besser gefallen. Das ist ja das ganze Problem. Wenn ich die Abmessungen von p:commandButton ändern könnte, würde ich p:commandButton verwenden.


----------



## stg (12. Mrz 2015)

Zusammengefasst willst du also, dass die Buttons gleich aussehen, nimmst aber den einen lieber als den anderen, weil er anders aussieht... das muss ich jetzt nicht verstehen, oder? 

Aber gut, lassen wir das 

Du willst also lediglich die Abmessungen von p:commandButton so ändern, dass diese mit denen von h:commandButton übereinstimmen, richtig? Wenn du dir den HTML output von beiden Kompoenenten anschaust, dann wirst du feststellen, dass h:commandButton einen <input>-Tag rendered, p:commandButton hingegen rendered einen <button>-tag, in den ein <span> eingebettet ist, in welchem der Text erscheint. Dieser innere span hat padding-Werte gesetzt, wodurch der "Button" insgesamt größer erscheint. Setz diese einfach auf 0 und die Dimensionen stimmen mit denen vom gerenderten outcome von  h:commandButton überein.


```
<p:commandButton value="Button"  styleClass="myclass" />
```


```
<style type="text/css">
            .myclass .ui-button-text {
                padding: 0px !important;
            }
        </style>
```

Ist es das, wonach du gesucht hast?


----------



## Rallenaldo (14. Mrz 2015)

Ja genau. Super danke.

Ich wollte, dass p:commandButton genauso aussieht wie der h:commandButton. Manchmal brauch ich eben AJAX Unterstützung und muss eben p:commandButton nehmen.

Aber hat sich ja jetzt erledigt


----------



## stg (14. Mrz 2015)

Rallenaldo hat gesagt.:


> Manchmal brauch ich eben AJAX Unterstützung und muss eben p:commandButton nehmen.



Du kannst auch mit einem h:commandButton mit AJAX nutzen. Nur das allein sollte also kein Grund sein...


```
<h:commandButton ... >
    <f:ajax execute=" ... " render=" ... " />
</h:commandButton>
```


----------

