Look up GWT CellTable header style/s? - gwt

How can TH style name/s of a GWT CellTable's heading be looked up programatically?
I have looked at the Client Bundle documentation but it isn't immediately obvious to me how it all fits together. Thanks.

Not sure exactly what you want to do when accessing the TH style names.
If you want to override the standard css style of a celltable header, here are some of the css styles you can override to change the Look and Feel of the component.
.cellTableFirstColumnHeader {}
.cellTableLastColumnHeader {}
.cellTableHeader {
border-bottom: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
overflow: hidden;
}
.cellTableSortableHeader {
cursor: pointer;
cursor: hand;
}
.cellTableSortableHeader:hover {
color: #6c6b6b;
}
.cellTableSortedHeaderAscending {
}
.cellTableSortedHeaderDescending {
}
Here is the complete list of styles for cellTables CellTable.css
Now if you want to access you header programmatically, you can use this solution to get the TableSectionElement corresponding the the Header of your table. Then you can access the row, then the cells, and lookup for their styles I guess.
Last thing if you want to override the header style, maybe you can use the following method when adding your column to your table
public void addColumn(Column<T, ?> col, Header<?> header)
Then create your Header or use a TextHeader for example then set your style on it before adding it to the table using
public void setHeaderStyleNames(String styleNames)
Example
TextHeader textHeader = new TextHeader("headerTitle");
textHeader.setHeaderStyleNames("my-style");
myTable.addColumn(myColumn, textHeader);

Easy solution:
import com.google.gwt.user.cellview.client.CellTable.Resources;
private String getCellTableHeaderStyle() {
Resources res = GWT.create(Resources.class);
return res.cellTableStyle().cellTableHeader();
}

Related

Magento 2 - Layered Navigation Swatches Styling

I am using Magento 2.4.5 and would like to make edit css of the icons in the layered navigation, need them smaller and put them in rows of 6.
I cannot find where I need to add/edit the css files for this part of the website. I tried Magento_Swatches\web\css\source_module.less but no result.
Any help would be appreciated.
Thank you
If you are using the default Luma theme:
Note: First, you need to check the template file of the CSS source used.
You need to edit the CSS file: swatches.css or custom CSS if you have created one. Getting the correct element may it can give you a correct catch.
Could you adjust the width and height of the swatch div? Please remember to specify! an important rule in CSS.
.swatches-globo .swatch--gl .ul-swatches-list li:not(ul.ul-globo-dropdown-option li), .globo-swatch-product-detail .swatch--gl ul.value li:not(ul.ul-globo-dropdown-option li) {
display: block;
float: left;
margin: 0 10px 10px 0!important;
}
Also,
.swatches-globol .swatch--gl li .globo-size-medium, .globo-swatch-product-detail .globo-detail-size-medium {
width: 35px;
height: 35px;
}
OR
.swatch-option.color {
min-width: 25px;
height: 25px;
}
Thanks

How to change the style of the Ag-grid header on sorting (React)?

It is clear from the official doc that I can change the header class using the "headerClass" prop.
However, I want to give the header a different style (specifically color) when its column is sorted.
Any advise about how to approach it?
For others who faced the same problem, you may change the following classes:
.ag-header-cell-sorted-asc {
color: blue;
font-weight: bold;
}
.ag-header-cell-sorted-desc {
color: red;
font-weight: bold;
}

Override GWT theme body margin css attribute?

I'm using GWT. I see that the gwt "clean" theme (the default one?) makes our body element have a 10px margin:
body {
color: black;
margin: 10px; <------
border: 0px;
padding: 0px;
background: #fff;
direction: ltr;
}
In my own css file, I set the margin to 0px, but it seems that GWT's keeps winning (maybe because it gets loaded last?).
What's the right way to override their setting?
Thanks
There are several possibilities:
You can use margin: 0px !important (this is the "brute-force" approach).
Or you can give your body a class like <body class="myApp">...</body>, and then in your CSS, use body.myApp { ... }. This will take precedence, because body.myApp is a more specific selector than body.
Or you can simply not use any theme at all (which is often a good idea if you want to create a fresh layout without worrying which attributes you'll have to override)
Another option is to load your css file by using clientbundle. (assume that playground.css is your css file)
public interface Resources extends ClientBundle {
public static Resources INSTANCE = GWT.create(Resources.class);
#Source("playground.css")
CssResource getPlaygroundCSS();
}
Note: playground.css is located in the same package as the Resources interface.
in the onmoduleload:
public class Playground implements EntryPoint {
#Override
public void onModuleLoad() {
Resources.INSTANCE.getPlaygroundCSS().ensureInjected();
Label lblHelloWorld = new Label("Hello World");
RootPanel.get().add(lblHelloWorld);
}
}
In the CSS:
body {
background-color: #FFFFD2 !important; }
works fine to change the background color.

GWT - Datagrid Selection Color

is there a way to change global the selection color of gwt datagrid?
I added following css-format in the main-app-css file:
.dataGridSelectedRow {
background: #1EDA17;
color: white;
height: auto;
overflow: auto;
}
I have seen also following link:
http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiCss.html
Sadly my change had no effect.
Do I miss any setStyleName() call?
There is also another way of setting custom css formatting for selected row in DataGrid. You need to create your custom interface that extends DataGrid.Resources. In this interface you should ovveride method dataGridStyle() and in #Source annotaion put path to your custom css file.
For example:
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface CustomDataGridResources extends Resources {
public interface CustomDataGridResources extends Resources {
#Source({DataGrid.Style.DEFAULT_CSS, "resources/CustomDataGridStyles.css"})
CustomStyle dataGridStyle();
interface CustomStyle extends DataGrid.Style {
}
}
If you want just to change style for selected row then your css file will contain only:
.dataGridSelectedRow {
background: #1EDA17;
color: white;
height: auto;
overflow: auto;
}
But I also prefer to change cursor for howered row:
.dataGridHoveredRow {
cursor: pointer;
cursor: hand;
}
Look also at similar discussion.
For applying custom style to your DataGrid you can use grid's constructor
public DataGrid(int pageSize, Resources resources, ProvidesKey<T> keyProvider)
where Resource is an instance that implements your custom interface (in my case CustomDataGridResources).
DataGrid.Resources customDataGridResources = GWT.create(CustomDataGridResources.class)
The custom css will not work since GWT overrides it with clean.css. If you use FIREBUG or any other tool you might recognize it. The solution is simple. Add !important to each line which has not affected with your custom css
.dataGridSelectedRow {
background: #1EDA17 !important;
color: white !important;
height: auto !important;
overflow: auto !important;
}

GWT MenuBar.Resources... ignored?

I'm creating a MenuBar, and I want to have it display a little icon when there are sub-elements to be displayed. I thought I could achieve this like so:
interface ActionHeroResources extends ClientBundle, MenuBar.Resources
{
#Source("actionhero.css")
public ActionHeroCSS css();
#Override
#Source("agw-dropdown.png")
ImageResource menuBarSubMenuIcon();
}
private static final ActionHeroResources RESOURCES = GWT.create(ActionHeroResources.class);
MenuBar actionMenu = new MenuBar(true, RESOURCES);
public ActionHero()
{
actionMenu.addItem("Select", aSelectMenuFullOfOptions);
}
But the menu appears with the word "Select" an no icon! I'm positive my ImageResource is working correctly because I use menuBarSubMenuIcon().getURL() from the same resource later, and my image shows up just as you'd expect. In the HTML generated by GWT, there is absolutely no distinction between the items with MenuBars as children and the items with Commands. My CSS is working fine.
Any thoughts?
Try overriding the CSS style for .gwt-MenuBar-vertical .subMenuIcon-selected, like this:
.gwt-MenuBar-vertical .subMenuIcon-selected {
background: none;
}
I use this for my own selected items and it works great:
.gwt-MenuBar-vertical .subMenuIcon-selected {
background: url(images/hand_pointer.png) no-repeat 0px 0px;
}
The problem was ultimately that the popup panels that form the submenus take their stylename from the parent, but append a dependent stylename. I don't know of a way to predict what that dependent stylename will be, since the original stylename is obfuscated. I worked around this problem by using the more generic .gwt-MenuBar popup stylename. This only works because I only have one style of popup menu in my program - I'm not sure what I would do if I wanted two popups to look different!
Hopefully, in later gwt releases, the MenuBar styles will come more closely from the resources passed to the menubar and make less use of dependent style names.
You can simply set a css rule for the that appears in the sub menu like this:
.subMenuIcon > img {
/* override gwt sub menu icon */
width: 6px !important;
height: 11px !important;
background: url('your-image-relative-path.png') no-repeat 0px 0px !important;
}