CommandButtons haben unterschiedliche Größe

Rallenaldo

Mitglied
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:

Code:
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

Top Contributor
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

Mitglied
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

Top Contributor
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 :D

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.

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

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

Ist es das, wonach du gesucht hast?
 

Rallenaldo

Mitglied
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:)
 

Neue Themen


Oben