CODEWITHSUNDEEP
cssjsfprimefaces
Mahmoud Saleh
Mahmoud Saleh

Reputation: 33605

How to add space between buttons in selectOneButton

i am using the selectOneButton and i want to add space between buttons, and if possible change the selection background color, please advise how to do that, thanks.

here's the code:

    <p:selectOneButton value="#{buttonBean.number}">  
        <f:selectItem itemLabel="Option 1" itemValue="1" />  
        <f:selectItem itemLabel="Option 2" itemValue="2" />  
        <f:selectItem itemLabel="Option 3" itemValue="3" />  
    </p:selectOneButton>

Upvotes: 2

Views: 5933

Answers (3)

Murasame
Murasame

Reputation: 183

You could try this too:

<p:selectOneButton value="#{buttonBean.number}">  
    <f:selectItem itemLabel="Option 1" itemValue="1" style="padding-right: 1em;"/>  
    <f:selectItem itemLabel="Option 2" itemValue="2" style="padding-right: 1em;"/>  
    <f:selectItem itemLabel="Option 3" itemValue="3" style="padding-right: 1em;"/>  
</p:selectOneButton>

The problem to this solution is that you will need to put that style into every button you want to space.

The other alternative is to give that style rule a class inside your css and then reference it for every button you want this rule to be applied.

In my personal experience I would use Chrome Inspection Tool (or Firebug for that matter) and test some inline styles for those buttons. That way you will be absolute sure how you want them spaced ;)

Upvotes: 0

Kevin
Kevin

Reputation: 4128

One example:

body .ui-buttonset .ui-button {
    margin-right: 10px;
}

The body is there so that the rule is more specific that the primefaces rule.

Alternatively, you can include your stylesheet like so:

     <f:facet name="last">
        <!-- Runs after primefaces css. I can't get <outputStylesheet/> to work here, however. -->
        <link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/css/index.css"/>
    </f:facet>

This allows equally specific styles override primefaces styles.

You will need to consult HTML/CSS inspection tools in your browser to determine what CSS to use.

Upvotes: 6

Rong Nguyen
Rong Nguyen

Reputation: 4189

You can use "Inspect element" function(Chrome, Firefox,..) to get Css'class, and then override them, for your situation:

<stype type="text/css">
.ui-button.ui-widget.ui-state-default.ui-button-text-only.ui-corner-right{
margin-left:10px !important;
}
.ui-button.ui-widget.ui-state-default.ui-button-text-only{
margin-left:10px !important;
}
</style>

Upvotes: 0

Related Questions