Some other CSS files removed the border around all GWT CaptionPanels. Now I'm looking for a way to add the CaptionPanels border again through the GWT projects .css file. Do you have an idea how to do it? Simply adding a .gwt-CaptionPanel{} to the css file has no effect...
I'm answering my own question here.
It took me some time to figure out that GWTs CaptionPanel uses a fieldset under the hood. The following places a red 1 pixel solid border around GWT CaptionPaneles:
fieldset {
border: 1px;
border-style: solid;
border-color: #ff0000;
}
Im not experienced with GWT CaptionPanels but you can try to set an !important on the class that makes the borders in the main style sheet. So you get something like: .borders {border-width:1px !important}
Related
I am trying to style my hyperlinks but Bootstrap 4 "Reboot" overwrites my css and changes the styling of my links to this:
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
Other than copying the reboot css, modifying and hosting it locally, is there any way to prevent reboot from styling the links? It does not matter if you load your custom css last, reboot always writes over the top of it.
Adding !important at the end of style is the easy way but, that triggers a waterfall where you will need to add more !important in your styling files.
This is why you should learn tree structure of styling.
What I recommend is add a class name to your body tag and override reboot.css or whatever like
<body class="body-class-name">
and then go into your css file which has the highest priority and put
body.body-class-name .a{text-decoration: none}
Happy coding!
It looks, that you load your CSS in the wrong sequence.
Put the bootstrap CSS above your own CSS.
Then you can overwrite bootstrap-settings without !important (which should still be the very last option).
try !important at the and of the style.
a {
color: #007bff !important;
text-decoration: none !important;
background-color: transparent !important;
-webkit-text-decoration-skip: objects !important;
}
The thing is that I want to override the CSS classes of primeng and change some colors. No matter how I do it it doesn't change. If change the ViewEncapsulation to none the component doesn't even appear. I've tried something like this:
.ui-chkbox-box.ui-state-active, .ui-radiobutton-box.ui-state-active {
border: 1px solid red !important;
background: red !important;
color: #FFFFFF;
}
Trying to override the properties in the component css but it still doesn't work.
I know other people have asked the same question but none of the answers has helped me so I'm a little bit desperate.
Add ::ng-deep
::ng-deep .ui-chkbox-box.ui-state-active{...}
I added the classes to the app.less file and it worked like a charm. The component .css was not working.
I have a page where I need to display borders within a table and I'm using w3.css, this has the following:
table,th,td{border:none}
I have my own css file and have tried:
table,th,td{border:1 !important}
With and without "!important", after doing some searches I have also tried:
$("table").removeAttr('style').css("border","1");
$("th").removeAttr('style').css("border","1");
$("td").removeAttr('style').css("border","1");
I have tried the above with .table, .th, .td and have tried "1px" too.
I know that I can change the w3.css by removing the border settings and it works just fine, however, I would prefer not to do that.
border is a shorthand property for border-type, border-width, and border-color. You need all three properties.
table {
border: 1px solid #000;
}
How can I round the corners of a Div ?
I tried with following code but it doesnot work:
border: 2px solid black;
border-radius: 6px;
I am using IE6/7, so above code should not be an issue, still it is now working.
Any other work around ?
TIA.
The border-radius CSS property is not supported by IE6/7
You need to use a .htc file to achieve that effect in IE.
Here is the .htc file link: http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc
You need to upload the file to the /css/ folder on your website.
And here is how you would use it in your code:
.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}
This tutorial explains it in detail: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
As cassi.lup just mentioned, rounded corners are not supported in IE6,7,8 .
You could however solve this with CSS3 Pie
I'm using the jQuery UI library + CSS as well as the jqGrid CSS for an ASP GridView I have. The problem I'm running into is that if I add a <table> inside my <ItemTemplate> I always get a border around the table.
http://dl.dropbox.com/u/6032362/Capture.PNG
I've tried everything I can think of to get rid of the border and I can't. I've tried inline CSS and nothing is working. I even tried to add the following to the jQuery UI CSS file (my table is called controlTable)
.ui-widget-content table#controlTable { border: 9px solid red; }
It works by adding a think red border around the table. But the cells still have an internal blue line.
http://dl.dropbox.com/u/6032362/Capture2.PNG
Any ideas what I can do to get rid of it?
Thank you
Did you know about css keyword !important? It's used to force override over declarations that otherwise take priority (priority of css declarations is based on order of placement and precision/specificity of selectors); anyway, try this:
.ui-widget-content table#controlTable td { border: 9px solid red !important; }
Every time your css like that stubbornly won't be applied (as something else overrides your declaration), try adding !important after the value, but before the semi-colon:
border: 9px solid red !important;
Also notice the exclamation point! +1