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
Related
I'm creating my site based on bootstrap But wanna do some customization.
Any idea to overwrite the bootstrap default style with this one
I know to replace the box style to underline only can use this
border: 0;
outline: 0;
But not knowing how to bend the line
I looked up the relevant Bootstrap 3.3.7 (most recent non-alpha) code for you, which would be the .form-control class.
If you override that class with the following CSS you will likely achieve the effect you are looking for.
.form-control {
border: 0; /* to hide border initially */
border-bottom: 1px solid #ccc; /* to set the bottom border (the only one we need) */
border-radius: 8px; /* to round borders or 'bend the line' */
}
Thus, border-radius is the CSS property you are looking for.
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've been trying to apply some custom style to my ListBoxes but the styles are not applying the following is the CSS
.gwt-ListBox{
background: #fff;
border: 1px solid #96CAEA;
}
I've inspected my code in IE and what i understad is instead of solid it is picking inset from Standard.css, I also tried using new css class like
.listBox{
background: #fff;
border: 1px solid #96CAEA;
}
and this also giving same result what's wrong in my approach,
Thanks,
GWT has concept of themes.
If you have inherited a Theme it will override your styles. Use firebug to find computed styles, stylesheets downloaded and styles applied. Once you see firebugs information it would be easy to fix it.
If would be easier to use clean theme in GWT if you need to do a lot of customization.
If you are using standard theme and are stuck with it. You would need to use !important tag in your .listbox stylename
.listBox{
background: #fff;
border: 1px solid #96CAEA !important;
}
The use of !important is considered a bit un-tidy or hackey approach :)
Try using the following to solve your border issue
border: 1px solid #96CAEA !important;
You can set a proprity of UIOBject to clear the ListBox Primary CSS theme and add your own theme like you want.
E.g
ListBox list = new ListBox();
list.setStylePrimaryName("listBox");
Property JavaDOC
"Sets the element's primary style name and updates all dependent style names."
Note: You need to add this css on your ui file, or you can create a CSSResource to referenciate your CSS file
interface ListBoundle extends ClientBundle{
ListBundle INSTANCE = GWT.create(ListBundle.class);
interface ListBoxCssResource extends CssResource {
String listBox();
}
#Source("package.listBox")
#CssResource.NotStrict
ListBoxCssResource css();
}
Then set the property pointing to the
String listBox();
like
ListBox list = new ListBox();
list.setStylePrimaryName(ListBoundle.ListBoxCssResource.listBox());
To use inside the UiBinder, you have to use the tag.
E.g
<ui:style>
.gwt-ListBox{
background: #fff;
border: 1px solid #96CAEA;
}
</ui:style>
<g:ListBox styleName="{style.gwt-ListBox}"/>
But using a external Resource work's better.
For more information read this
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