I am using ExtJS textarea and trying to remove the border and background image for the textarea. I am able to remove the border for the textarea, but unable to remove the default background-image.
The component in fact is not taking the background I have set in fieldStyle. When I inspect the element in firebug after the textarea is rendered, I don't see the background in the style.
var textArea=Ext.create('Ext.form.field.TextArea', {
width:200,
fieldStyle:'border:none;background:#FFF !important;width:120px;'
}
How do I override the background and width only for the field?
Thanks
Remember that, besides adding the "!important" directive, your stylesheet must be the last one to be loaded, the "cascading concept", so your rule would be the one to be read.
after the CSS rules loaded for extjs, yours must come after.
Hope this helps.
change to background-color:#FFF !important.
Related
I want to fix some styling of a component which I'm importing. The component uses its own shadow root (I think), and inside of that shadow root is the div I want to add some styling to.
Now I've tried using :host(), and :host-context(), but for some reason it's not being selected. When I select the custom element itself, it does add some styling. However, I don't want to add styling to the custom element, but to an element inside of it.
Below is a screenshot of the custom element, folded open in the inspector in Chrome:
I want to add some styling to the div with class .mb-1. Does anyone know which selector I should use?
You can't do this for while, there are a nice explanation about here:
Is there a CSS parent selector?
As you, i'd like this feature, but isn't available.
I'm trying to add a border around my DataGrid GWT element. I've had limited success overriding the default CSS classes defined in the official GWT DataGrid CSS file. I can successfully override the ".dataGridEvenRow" and ".dataGridOddRow" with border-style and border-top attributes and the border becomes visible around those rows, but when I try overriding the ".dataGridWidget" and add border CSS attributes as displayed in the code below no border appears.
.dataGridWidget
{
border-style:ridge;
border-width:5px;
border-color: blue;
}
What can one do to get a blue border around appearing around a DataGrid?
After a few more hours trying to get the styling to work directly on the DataGrid, I decided to just wrap the DataGrid using a SimplePanel and add my border directly to that. It looks exactly like a border around the DataGrid itself, and since the other DataGrid classes seem to override without any problems (like dataGridEvenRow and dataGridOddRow), it's a seamless band-aid to the issue.
let's say I have a button which has the following css style applied to it:
.my_button
{
height: 30px;
}
Now let's say on some pages in my application, I don't want my button to have a height of 30px (Neither do I want to give it a new height), I want it to have its default height set by jquery ui. How can I cancel/reset that css that is applied to my button?
Thank you
To reset a CSS property, set it to the default value.
For height, the default value is auto.
To get the default for any style, open about:blank and run the following in your JS console:
getComputedStyle(document.createElement('span')).PROPERTY
Where PROPERTY is the one you want. height, width, background-color, whatever you want to find the default for.
You just need to remove the .my_button class , like this:
$('#ID_of_thebutton').removeClass('my_button')
I give my links a background color to make it stand out, the problem is that it will also apply to links which have images as child instead of text. The result is that the image has a small background at the bottom. (see: http://blog.cmstutorials.org/reviews/general/featured-tutorial-of-the-week-05-feb-2011 )
How do i removed the background of links when it has an img as a child? I though that someting like this would work:
.featured_tutorial img < a
CSS does not support a parent selector.
You have to use classes like a.this_link_contanis_img{ /*override background*/ }
Or maybe you could set a new property to the img. This could hide the link's background.
.featured_tutorial img{ /*override background*/ }
Edit: Ok, that wont work in your case..
Cascading Style Sheets don't allow accessing elements "backwards". You can only access children of an element, not its parents.
It has background leaking at the bottom because images are inline level elements by default and are positioned at the baseline of the text line they are placed on thus there is gap between baseline and descent line that gets the color leak. You can get rid of it in two ways. Set css for:
a img { display: block; }
or if you want the to stay displayed as inline
a img { vertical-align: bottom }
this should fix your problem as it will align the image to the descent line of the text line the image is placed on when in inline mode.
Hope it helps,
T.
As mentioned there is no CSS fix but as you're already using jQuery this is the only way i can think of doing it
http://jsfiddle.net/vrqCV/
jQuery(document).ready(function() {
jQuery("a:not(:has(img))").addClass("bg");
});
As has already been pointed out, CSS doesn't have a way of looking "up" the DOM tree. It basically comes down to performance considerations. (Here's one explanation.)
But if you're not averse to the sometimes necessary evil of tacking this sort of thing on with Javascript, jQuery has a :parent selector.
<a class="success" href="javascript:void(0)"></a>
//CSS for setting background for above link
a.success:hover{
//set background image
}
My intent is to change the class of the link on server side based on success/fail and set icon for the link accordingly. But the above CSS is not working as expected.
There is nothing wrong with that css.
However, your link is empty so it will not take up any space meaning that a background image will not be shown.
You will need to put something in the a tag or make it a block level element in order for the element (and the background...) to show.
By the way, I am just assuming that you are not really using the // to comment in your style-sheet as that is not valid. Use /* */ if you want to comment in a style-sheet.