How can I change properties of component using CSS?
Let's say I have two buttons:
<p:commandButton id="mySmallButton" styleClass="smallButton">
<p:commandButton id="myButton">
I want all my buttons to have font-size: 14px; so I added this rule:
.ui-button .ui-button-text{
font-size:14px;
}
But my smallButton should have different size, so I added:
.smallButton{
font-size:11px;
}
Unfortunatelly this doesn't work. This is produced HTML:
<button class="ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only smallButton" (...)>
<span class="ui-button-text ui-c">MY TEXT</span>
</button>
The text on this button is stil 14px size. How should CSS look like to have all my smallButton font-size: 11px ?
Your problem is related to the loading order of all the CSS. CSS are cascading style sheets. So if you want your .smallButton style to be applied, it must be the last in the css chain, in order to override any previous matching styles.
Check the order of the CSS (see generated source header in your browser)
If you want your CSS to be the last one, you can use this inside your page or template:
<f:facet name="last">
<h:outputStylesheet library="default" name="css/yourstyles.css" />
</f:facet>
This avoids overuse of !important tag, that works either.
EDIT
This works fine for me on chrome. Chrome says font-size is 11px for ui-button-text embeded span, and displays the first button smaller than the second one, which font-size is 14px.
<style>
.ui-button-text{
font-size:14px;
}
.smallButton .ui-button-text {
font-size:11px;
}
</style>
<p:commandButton id="mySmallButton" styleClass="smallButton"/>
<p:commandButton id="myButton"/>
Also, please notice that the generated html buttons do not have any ui-button class.
I found the solution to my problem. All I need is this:
.smallButton.ui-button-text-only .ui-button-text {
font-size: 11px;
}
So now ui-button-text-only .ui-button-text only apply to the smallButton. I tried it before but with space after .smallButton so it didn't work. Now it is working properly. Thanks for your answers.
PrimeFaces overrides your css with the default rules for the parent form.
You can define your css for the form like this:
form .smallButton{
font-size:11px;
}
or you can use the !important keyword:
.smallButton{
font-size:11px !important;
}
See also:
PrimeFaces: how to override CSS class
PrimeFaces overrides my custom CSS style
Related
I'm trying to style this button with CSS. It's used on a Cart Page and other areas throughout the site. On the cart page its "name" element is unique name="calc_shipping". However, because the class is not unique if I try to style it using the current class it naturally changes the style of all similar buttons.
Question: Is it possible to somehow use the name="calc_shipping" element in my CSS modification to style this button specifically?
<button type="submit" name="calc_shipping" value="1" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
Thanks for any suggestions! I've been racking my head on this for hours.
ch
You can simply add an ID to this specific button. I'll for example use ID "calc_shipping_btn"
<button type="submit" name="calc_shipping" value="1" id="calc_shipping_btn" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
The CSS for this would be:
#calc_shipping_btn {
background-color: #00FF00;
color: #FFF;
}
If you don't want to add an ID you can target this specific button with this CSS:
button[name="calc_shipping"] {
background-color: #00FF00;
color: #FFF;
}
Add !important after every rule if they refuse to style the element. This helps override the class' css.
if your button has unique parent section as div or span for example parent-section class you can add style to button this example
.parent-section button{
...
}
I have a form and I'm using CSS to layout the fields on the screen.
This is working as I'd like and can be seen here :
FIDDLE
I'm now trying to apply the same layout to a form within a CSS Accordion layout and it's getting messed up. This FIDDLE shows what going wrong.
This is the HTML I'm using :
<div class='block'><label> Text 1</label><input type="text" name="text1" /></div>
<div class='block'><label> Text 2</label><input type="text" name="text2" /></div>
and the CSS:
div.block {overflow:hidden; }
div.block label {width:325px; display:block; float:left; text-align:left; vertical-align:middle; }
I'm assuming this is messing up as accordion is using the <lable> tag to create the sections.. and I'm using it to layout the fields.
So how do I layout my form fields neatly and keep the accordion working ?
This is the final result I'm after:
Thanks
Some of your form styles are being overridden by the accordion's CSS. Neither have very impressive specificity. You can fix this particular problem by moving your CSS to the end and adding an ancestor selector to increase rank:
.horizontal div.block {
overflow:hidden;
}
.horizontal div.block label {
width:325px;
display:block;
float:left;
text-align:left;
vertical-align:middle;
}
Demo
Updated demo to remove border & background from interior labels.
I haven't added all necessary reset styles on your elements. A better approach might be to add classes to the outer labels, and modify the accordion CSS to target that class, or use a child selector (.horizontal > ul > li > label). That would prevent you from needing to reset so many properties.
A best-practice approach for situations like this is to load a third-party product like this in its own CSS file, along with any others in their respective files, and then load your custom CSS file that includes any overrides. This makes it easier to get your styles to trump the others, which is normally what you'd want.
<link rel="stylesheet" href="accordion.css" />
<link rel="stylesheet" href="menu.css" />
<link rel="stylesheet" href="widget.css" />
<link rel="stylesheet" href="custom.css" />
HTML:
<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
<p>
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal;
}
The HTML code is on content page, which is inside master page.
The issue is - the text is bolded out, but it shouldn't be.
How can I can get rid of it?
Try
.e_ticket_font p {
font-weight: normal;
}
because you are not targetting p tag.
Dipesh's answer is correct. I'll just add a bit explanation. CSS is cascading style sheet, means the style for any element/class/id can be mentioned at multiple places and applied in the order in which they are included. In your case, some other style seems to override your style to make it bold since your snippet will not make it bold.
Considering this, as a general best practice, always target the specific elements if you are not sure if it's class will be styled somewhere else or not.
Thus, .e_ticket_font p {... is prferable than .e_ticket_font {.... If there are multiple paragraphs and you want only some of them to be different, then again use classes/ids, like
.e_ticket_font p#heading {...
.e_ticket_font p#content {...
.e_ticket_font p.specialpara {
and so on.
Another way to make it sure is to apply css inline for that element, but this should not be used generously for many elements as it affects the "structure should be separate than presentation" principle
<div runat="server" Visible="False">
<p class="e_ticket_font">
Some text.
</p>
</div>
CSS:
.e_ticket_font {
font-weight: normal !important;
}
try inline css because if you don't know if there are other css classes are specified in masterpage for <P>
something like:
<div runat="server" Visible="False">
<p style="font-weight: normal;" >
Some text.
</p>
</div>
it will work for sure, then you can check for other css references for <P>
or (for each) element below .e_ticket_font:
.e_ticket_font * {
font-weight: normal;
}
i advice a rare use of !important in case of runaway bubbling your DOM
but mind of the selector detail.. if there is any css selector which describes the object on a directer way like...
.e_ticket_info#e_ticket_info {
font-weight: bold;
}
...css will pick that one with privileg!
i'm trying to customize the whole style of the component, and hide the selector image. All graphics style such border, shadows are setted in the previous table. Now i want to remove all style from the selection menu such as the horrible icon to select an item
My original code in jsf:
<h:panelGrid class="dropDown">
<h:selectOneMenu value="#{myBean.selected}"
id="list" class="test" style="border-style:none; height:31px;">
<f:selectItems value="#{myBean.list}" var="item"
itemLabel="#{item.name}" itemValue="#{item.code}" />
<f:ajax execute="#this" />
</h:selectOneMenu>
</h:panelGrid>
This is my style for class .test
.test{
background-color: white;
clear: both;
color: black !important;
font-family: Helvetica !important;
font-size: 16px !important;
height: 30px;
margin-bottom: 0;
border-style: none;
}
My page rendered in html:
<select id="list" name="item" class="test" size="1" style="border-style:none; height:31px;"onchange="jsf.util.chain(this,event,'disableBox()','mojarra.ab(this,event,\'valueChange\',\'#this\')')">
<option value="1">al</option>
...
<option value="22">re</option>
</select>
But when i open the webpage from a webview (Android) I still see the icon .
Is it impossible to remove if I'm on a simple Webview? Or what element should I use to remove it? Or, it's another component I could use?
My idea is to hide the icon and allow a user to click on the single line, then the Android original component drop down list is opened.
I know that it's styled by the operating system.. any suggestion?
I think it's not usefull.. but I created a simple jsfiddle page where I can test css style modifications.
jsfiddle
The standard JSF html renderkit will render an h:selectOne as a simple html select tag with you f:selectItems becoming the child option tags.
<select>
<option value="a">a</option>
<option value="b">b</option>
</select>
so your question is really is there a way to remove the icon from an html select tag. It really has nothing to do with JSF.
Once you've figured out how to write the html and cssto get the effect you want, you can then write a custom renderer to reproduce that html.
Found a working solution with custom css:
Since the component jsf is rendered as , we include all elements inside a , or in this case inside a
<h:panelGrid class="parent dropDown">
<h:selectOneMenu value="#{myBean.selected}"
id="list" class="test" style="border-style:none; height:31px;">
<f:selectItems value="#{myBean.list}" var="item"
itemLabel="#{item.name}" itemValue="#{item.code}" />
<f:ajax execute="#this" />
</h:selectOneMenu>
</h:panelGrid>
adding the class parent to the panelGrid and defining:
.parent{
width:98%;
overflow:hidden;
}
.parent select{
width:100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: none;
}
Our jsf component is rendered without the arrow and other components, like borders and shadows.
custom style select using only html and css not any js/javascript
`http://jsfiddle.net/suyogN/39tx46L3/`
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>