commandButton size

[brad.revolver]

Hello,

I have a command button like this :

Code: Select all

<p:commandButton style="margin-right:20px;" value="Login" update="growl" actionListener="#{loginBean.login}" oncomplete="handleLoginRequest(xhr, status, args)"/>

I found it from primefaces example page . (By the way I dont understand why the examples are working from http://www.primefaces.org:8080? Since the port is 8080, i cant reach through the company's network. It is too strange. I am sure many people have the same opinion as mine. It is nonsense )

But this button is so huge! How can i re size it? I checked from user's guide - skinning section. But I couldn't handle it.

thanks in advance

[michiel]

try by setting style :

Code: Select all

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

or

Code: Select all

.ui-widget {
   font-size: 75% !important;
}

[cagatay.civici]

Hi,

Welcome to PrimeFaces!

Regarding 8080, we'll make it run on 80 very soon as many users requested this for the same reason.

Is your button larger than the showcase buttons?

As an example, you can try;

Code: Select all

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

This selector is a global selector that applies almost all PrimeFaces components.

[ramo.karahasan]

Hi Cagatay,

yes for true, my p:commandButton is larger than the h:commandbutton:

i use this code

Code: Select all

<h:commandButton actionListener="#{executeClass.doSome}" value="Match" >

</h:commandButton>

<p:commandButton actionListener="#{executeClass.doSome}" value="Match"/>

and the result looks graphically like this:

http://img834.imageshack.us/img834/817/ ... age01h.png

And if i do a inline style like this to the p:commandbutton

Code: Select all

<p:commandButton actionListener="#{executeClass.doSome}" value="Match" style="width: auto; height: 20px"/>

than it looks like this:

http://img836.imageshack.us/img836/2995 ... lage01.png

why is that by default so large?

Cheerio,
Ramo

[cagatay.civici]

There are many discussions and solutions to this, please do a forum search.

[bobby]

I also have the same question, about how to resize a button. When I search for "button size" and similar, I don't get any topics that seem to be related to my question. If there's an answer already available, could someone post the link here?

[kamaleshkumarkg]

Hi,
By the following code u can reduce the button size

<p:commandButton value="Add" style="width: auto; height: 20px;font-size:80%;" actionListener="#{specAddBean.saveSpec}"
ajax="false" />

Regards,
Kamalesh

[kukeltje]

in the end it is all just html, css and javascript...