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
Related
I currently have a global blue theme (saga-blue). I managed to change the text and bottom border color (to match the desired brand colors) by using simple css.
However, when a menu item is first selected, it gets this ugly blue-colored border behind it, as such:
https://imgur.com/SYF7xmJ
No matter what CSS I try, I can't manage to remove it. I can't find where it comes from when I inspect the element. Also, it gets removed as soon as I click anywhere else on the screen: it is just there for the first click on the item, goes away after any other click.
CSS that I have tried:
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight {
color: $brand-red;
border-left: 0px !important;
border-right: 0px !important;
}
I also tried unsetting any property that had to do with 'left' or 'right' on the menuitem and menulink components - but the ugly blue border just keeps on showing. If anyone has any idea what kind of property this might be, I would really appreciate it.
If your style is not applied and you want to override the primeng default styling, you may need to use :host ::ng-deep.
Another way of applying style to a PrimeNG component nested element, is to use the styleClass template property. It is not everytime efficient, you need to sometime force the css through the !important priority modifier. It is not the cleanest way, but there is few CSS properties that are inlined by calculation on some component.
For your specific problem, the .p-tabmenu (and subclasses) is playing with a mixin of focus, when the element is in focus state.
#mixin focused() {
outline: $focusOutline;
outline-offset: $focusOutlineOffset;
box-shadow: $focusShadow;
}
You need to play with the property box-shadow to remove/modify this blurred color that you dislike with the advices I gave you on the primeng styling if it is not applied as you wished.
Don't forget the pseudo-class :focus while overriding the style.
You may have this kind of result to remove it completely.
:host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link:focus {
box-shadow: none;
}
Try outline: 0 this is something that defaults browsers do for accesibility mainly.
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;
}
It seems the only option available today is border=x where x is the thickness of the border. It looks really ugly as it outlines each choice in the group.
I want a simple border around all the choices. When I go into debug it I can manually add fram="box" to the generated Table html and it looks great.
I can't figure out how to add frame="box" to the xp:checkBoxGroup I've tried using attributes without success.
Any ideas?
If you use a xp:checkBoxGroup the XPages runtime puts the checkboxes in table cells and wraps it with a fieldset element. You can easily target that using some CSS. That's how I would solve this.
If you want a simple border around your checkbox group you can do this:
<style>
fieldset.xspCheckBox {
border: 1px solid #333333;
}
</style>
<xp:checkBoxGroup id="checkBoxGroup1">
<xp:selectItem
itemLabel="Blue"
itemValue="blue">
</xp:selectItem>
<xp:selectItem
itemLabel="Green"
itemValue="green">
</xp:selectItem>
</xp:checkBoxGroup>
Or if you want a border around every option you can use this:
<style>
fieldset.xspCheckBox {
border: 0;
}
fieldset.xspCheckBox label {
border: 1px solid #444444;
padding: 5px;
cursor: pointer;
}
fieldset.xspCheckBox label:hover {
background: #eeeeee;
}
</style>
(note that the :hover class isn't really necessary, but adds a hover effect to all options: depending on your browser requirements that might not be supported)
Just add a style with a border definition to your xp:checkBoxGroup:
<xp:checkBoxGroup id="..." value="..." style="border:1px solid black;">
...
</xp:checkBoxGroup>
Instead of putting the style directly into xp:checkBoxGroup definition you can use a css class.
I am using vanilla GWT DataGrid (com.google.gwt.user.cellview.client.DataGrid) to construct a table. To play with the CSS styles I am using a similar approach described How to override CellTable css.
I need to apply a border to the entire table. I can apply borders to individual cells using .dataGridCell.
/**
* Applied to every cell.
*/
.dataGridCell {
padding: standard-cell-padding;
border-bottom: 1px solid #6f7277;
border-left: 1px solid #6f7277;
border-right: 1px solid #6f7277;
border-top: 1px solid #6f7277;
overflow: hidden;
}
But then in the intersections the border becomes bold and page doesn't look nice.
There is another class defined in the css as below.
/**
* Applied to the table.
*/
.dataGridWidget {
}
It seems even I changed values for this class, it doesn't has any effect. Does any one know how to get this done?
Your CSS class names are being obfuscated. You should use Client Bundles (specifically, CssResource) in order to ensure that the right class names are used.
Also, take a look at this.
The intersections show up as bold because of some styles that the browser is inserting.
In Chrome they show up in inspector as user agent stylesheet
In particular what makes the borders appear thick in the intersections is this border-collapse: separate;
See this stackoverflow link that explains how to get rid of these default browser css settings.
and also this
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}