This question already has answers here:
How do I override default PrimeFaces CSS with custom styles?
(5 answers)
Closed 7 years ago.
.ui-orderlist .ui-orderlist-list {
height: auto;
}
Should't it set height of list to auto? Because it does't work.
In browser styles appears like
.ui-orderlist .ui-orderlist-list {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
height: 200px;
width: 200px;
}
.ui-orderlist .ui-orderlist-list {
height: auto; // this line no active
}
You can override css rules by making them more specific than default primefaces rules and thus giving more "weight" for your custom rule. For example, wrap your order list with a < div class="some_class">< p:orderList ... />< /div> and provide css rule like:
div.some_class .ui-orderlist .ui-orderlist-list {
height: auto;
}
You can read more about css specificity here and here.
Alternatively you could add an !important exception to your custom rule like:
.ui-orderlist .ui-orderlist-list {
height: auto !important;
}
Such approach though is not recommended and should be used (as mentioned #Kukeltje in comment) as the last choice.
I had the same issue some days ago. You have to make sure that your stylesheet gets loaded after default PrimeFaces CSS. You can achieve this by including your stylesheet in the following way:
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
</f:facet>
</h:head>
PS: Please do not use !important.
Related
I am setting the width on an image:
<img class="someImageClass" src="someImage.jpg">
I use the following css styles:
.someImageClass {
max-width: 30px;
}
But I also have a global css style for images as well:
img {
max-width: 100%;
}
The max-width in the someImageClass style is being overwritten by the one that is global and I don't understand why. If I apply the css class directly on the element, it should take precedence over any global style.
try
img.someImageClass {
max-width: 30px;
}
There must be another rule using img.className somewhere. But in normal cases you can calculate the specificity of CSS rules. How is explained here https://www.w3.org/wiki/Inheritance_and_cascade#Specificity
Are you aware of the term important ?
.someImageClass {
max-width: 30px !important;
}
This question already has answers here:
How to override !important?
(12 answers)
Closed 7 years ago.
i have a plugin in js from external services. This script has built its own css, but its rules doesn't fit in my layout. So i need to change 540 with 700px:
#chat-container.bbhorizontal .main .booking {
margin-top: 0;
min-width: 540px !important;
}
Path from Bugzilla:
<div class="main">
<form name="chat">
<div class="booking">
I have tried:
#div main.chat.booking {
display: block;
visibility: visible;
min-width: 800px !important important;
margin-top: 0;
}
No success...
How i can achieve this? Thank you.
I prefer programming in C that css. UPDATE see the picture please:
Add more specificity to the selector:
#chat-container.bbhorizontal .main form[name="chat"] .booking {
min-width: 700px !important;
}
That should do the trick...
You just need a more specific selector than the one that you wish to override and to also use !important.
For example:
html #chat-container.bbhorizontal .main .booking {
min-width: 800px !important;
}
The html in the selector is the important bit. That makes this selector more specific than the one your script is generating.
NB: You don't have to use html, I just knew that it would work because everything is always beneath an html element.
.main form .booking[style]{
display: block;
visibility: visible;
min-width: 700px !important;
margin-top: 0;
}
jquery
$("#chat-container.bbhorizontal .main .booking").css("min-width","700px !important");
First of all, sorry for yet another post about this topic but I couldn't see anything that makes sense to me in polymer documentation and on stackoverflow.
I just want to attach style to my element.
From the documentation (https://www.polymer-project.org/0.5/articles/styling-elements.html and https://www.polymer-project.org/0.5/docs/polymer/styling.html#including-stylesheets-in-an-element)it should be straight forward.
<polymer-element name="x-foo">
<template>
<style>
x-foo div { ... }
</style>
...
But it doesn't work as expected. If we define the style for an element, inside the element, it is not applied.
Here is the code:
<polymer-element name="x-button" noscript>
<template>
<style>
/* not working */
x-button {
background-color: green;
}
/* not working */
x-button .hithere{
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
/* not working */
x-button .hitheretoo{
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
<div class="hithere"></div>
<template>
<div class="hitheretoo"></div>
</template>
</template>
</polymer-element>
And a live demo:
http://codepen.io/anon/pen/yyZqMN
Thanks
ssorallen explained the css issue very well and there is more. I couldn't get :host to work on it's own and depending on the browsers you will need to shim the Shadow DOM & add polyfill-next-selector styles.
Additionally, The element never gets registered because you have not used the Polymer() function inside the custom element (unless you chose not to add it in your code example). Here is a codepen of what I found to be one possible solution.
The one thing I am still trying to figure out is the nested <template> issue. I can't pierce the shadow boundary with ::shadow or /deep/. Might be a bug. I'll take a look when I get a few minutes.
Use the :host selector when styling an element from inside itself
<style>
:host {
background-color: green;
}
.hithere {
display: block;
min-height: 50px;
background-color: red;
margin: 20px;
}
.hitheretoo {
display: block;
min-height: 50px;
background-color: blue;
margin: 20px;
}
</style>
When you're styling from inside a custom element all selectors are already scoped to the element. By selecting x-button you are selecting any x-buttons that are descendants of this element, not the element itself. That also means you don't need to prefix selectors with the tag name to scope them; the shadow DOM provides scoping.
I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.
I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.
Scope
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img style = "position:absolute; top:300px; right: 0px; z-index:1"
src="computer.jpg"/>
<IMG ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px;
WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/>
</body>
</html>
And here is the stylesheet.css
#grow:hover {
width: 100px;
height: 150px;
}
Inline styles have priority over CSS i believe.
Change your CSS and HTML to the following:
#grow {
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover {
width: 100px;
height: 150px;
}
HTML:
<IMG ID="grow" SRC="icon2.gif"/>
The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.
Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)
Try this style
#grow:hover {
width: 100px !important;
height: 150px !important;
}
Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.
The best thing you can do is avoid inline style and write style as below:
#grow
{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:2;
height:47px
}
#grow:hover
{
width: 100px;
height: 150px;
}