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')
Related
I would like to set the height of md-toast but when I set height in an inline style it just raises the bottom of where the toast is rendered and does not affect the actual height of toast container.
I've tired this:
<md-toast style="height:100px;">
Here is my plunk - http://plnkr.co/edit/k7lXAn?p=preview
The template adds an extra div that isn't affected by the height of the parent md-toast.
Adding this override in the css file fixes it (in Chrome at least):
md-toast .md-toast-content {
height: 100% !important;
}
This is because your codes related to md-toast are inside the ng-template. Since those are templates, you can use them directly in your html code. Once you do that, the problem is fixed. I have modified your code. Here's the [plunk][1]:
[1]: http://plnkr.co/edit/nkuSGf?p=preview
I have a modal window with a bootstrap modal-content class, where I need to change the background color to transparent for a particular modal. Because this has been set up for me, I can't actually add classes to the modal-content div.
I only want to change this property if the div within this contains the class erm-modal. Currently my Less file looks like this:
modal-content {
background-color: transparent;
.erm-modal {
......
}
}
This changes my background color correctly, but also changes the background color for all the other modals as well! Can I write some less to allow me to only change this property if the child div contains .erm-modal?
I am using AngularJS if that makes a difference.
Thanks
I have a bunch of inputs in bootstrap that have input-group-addon tags as labels. On my page, I have labels of various lengths of text, but I want all the labels to be the same width for the visual effect. I'm trying to manually set the width of these span elements to the largest one I have on the page (for this example, say 75px).
Making my own CSS class doesn't do the trick, bootstrap overrides it somehow that I don't understand.
Making my own .input-group-addon.myClass CSS class doesn't work either. The browser shows that this isn't overridden by another style, but I don't see it actually effecting the span element.
Lastly, simply adding a style="width:75px" to the span doesn't work either.
I'm at a loss as to how I can ovveride this style to make all my span's line up regardless of text length.
Code example: http://www.bootply.com/SvJAiwVavY
I looked at your sample code. From Bootstrap, the .input-group-addon class has a display property set to table-cell, so there is no need to do anything other than set an appropriate width. If you set a width that is smaller than the contained text, it's not going to look like it has changed. Try changing your example code to the following:
.input-group-addon.test {
width: 200px !important;
}
You may want to change your text-align to something other than center, but that's up to you.
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.
Does anyone know how to:
1) Add a scroll to the popup created by the SuggestBox?
2) How to customize the looks (CSS) of the SuggestBox efficiently?
I want to make above changes without touching the actual implementation as much as possible.
Also this solution should support (IE7-IE8, FF, Chrome).
Thanks.
Use Firebug addon for Firefox (or IE/Chrome debugger) to inspect the element you need to modify its style and see if GWT has assigned it a style class name [or read its JavaDoc]. Here in you case its gwt-SuggestBoxPopup for outer element and lots of other style class names for inner elements like suggestPopupMiddle, suggestPopupMiddleCenterInner and suggestPopupContent. Use this class names to modify components style.
To add vertical (horizontal) scroll you need to specify height (width) or max-height and use overflow-y: scroll; (overflow-x: scroll;) or overflow: scroll;
Use auto instead of scroll to hide the scollbar when not necessary.
So your short answer is:
.suggestPopupContent{
height: 100px;
overflow-y: scroll;
}
2)
new SuggestBox().setStyleName(/* your style here */);