I have a Google sheet for the data source. Column B contains the information I want to show in the table. B1 is the column label ("name") and the rest of column B is the data of interest (B2 is "Anna," B2 is "Bernard," etc.)
As described in https://developers.google.com/chart/interactive/docs/spreadsheets, I can successfully query the data using an URL like https://docs.google.com/spreadsheet/ABC123/gviz/tq=select...
...where the select statement is the encoded version of "SELECT B ORDER BY B."
My table div tag populates but it shows the header row "name." How can I conceal this and make it start with "Anna"?
Do I change the select statement in the front end or is there a table option I can configure to hide the first row?
I figured it out: in the table options, add the parameters:
allowHtml: true,
cssClassNames: { tableCell: 'nameClass', headerCell: 'noHeader' }
and in the CSS, add:
.noHeader { background-color: #FFF; border-collapse: collapse; border:none; font-size: 0px; }
(Following your example) a simpler way is to use display: none (See https://stackoverflow.com/a/5113253/11794965)
So in your CSS, add:
.noHeader {
display: none;
}
Related
Does anyone have an example showing how column headings can be styled in an Interactive Grid?
I would like the column headings in each of the 4 different Column Groups to have a different background color to make the groups more distinguishable:
It doesn't look like there is a way to easily assign a style to the Column Group via the developer interface. So, I've tried to use the TH ID:
#R141502556723241100_ig_grid_vc_cur {
background-color: #242d45;
color: #ffffff;
}
but instead of changing the background-color for the Term/Element TH, it changes the background-color for whatever element is clicked on.
First add a static ID to your IG.
Static ID: my-static-id
Then you can use the following css snippet:
/*
where the value between the quotation marks ("") is the index of the column heading
*/
#my-static-id th[data-idx="0"] {
background-color: rebeccapurple;
}
#my-static-id th[data-idx="1"] {
background-color: green;
}
The result:
I am looking to present a set of properties. key: val type-of-thing. Not knowing any better, I am laying it out in a table.
The following css:
table.properties td:first-child {
text-align: right;
}
table.properties td:first-child::after {
content: ":";
}
aligns the text in the 1st column (the keys) to the right, then appends a semicolon.
Is there a way to express that in a more concise way? Like in a single rule? Or maybe such presentation is better done in another manner altogether?
Appreciate a tip!
Im trying to make wider field of "last post" in phpBB. I edited CSS "lastpost" class from 250 to 300 value but looks like left fields are not responsible so extended field goes on next line and forum's list get f*ed up. What I should edit more?
Address of phpBB is: http://schiza.me
Thanks
You need to change multiple selectors.
Here is an example :
dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info {
width: 300px;
font-size: 1.1em;
}
Other table lines will need to always keep the same total size you will migth want to change an other property like that one for th number of topics and views :
dd.posts, dd.topics, dd.views {
width: 75px;
}
I have a very simple webgrid with 3 columns:
View
columns: grid.Columns(
grid.Column("Applicant Name",
format: (item) => #Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
null), style: "AppName")
, grid.Column("Role", "Role", style: "Role")
, grid.Column("ApplicantSkills", "Skills", style: "AppSkills")
I want to set my columns to a fixed width. I have tried using percentage widths here and exact widths like 500px, 100px etc, and they all work initially, but are lost after postback.
css:
.AppSkills {
width: 70%;
}
.AppName {
width: 20%;
}
.Role {
width: 10%;
}
My grid is a results grid, which is populated from a number of filters, so every time the user selects different filters and clicks search the results are changed and the grid re-populated. What im finding is the grid column width style is being lost. Here is what my screen looks like. Initially it looks fine, but after selecting different filters and hitting search, the grid column widths are lost.
I have tried posting my form as a GET and a POST to see if it was the Get that was losing the formatting. But both yield the same results.
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
Is there anything obvious I'm doing wrong here? Or is there any way I can ensure a fixed width on my grid columns so they don't move about?
You're missing spaces after the commas, so it's probably treating one of the entries as a big unbreakable word. If you can't change the underlying data, assuming it isn't the code doing the concatenation, you might be able to use the css word-break property to sort it.
Make sure that after postback that the grids still have the classes applied to them.
Also, please post the HTML for us to view so we can diagnose the problem since we are not to sure if they are styled divs or a table.
If it is a table, try running the following CSS. Basically, it will target the columns individually without class names, just in case the classes are lost during postback.
td:nth-child(3) {
width: 70%; /* targeting the skills column */
}
td:nth-child(1) {
width: 20%; /* targeting the name column */
}
td:nth-child(2) {
width: 10%; /* targeting the role column */
}
I have a column Definition for each colume that extends AbstractColumnDefinition these columns are put in a DefaultTableDefinition PART OF a PagingScrollTable
example:
NAME | SIZE | RES | DELETE |
this style (AT THE END OF THE PAGE ) is added to the column names if you notice all of them are with a cursor pointer , meaning a hand shows up when i hover above each one.
I want to remove the cursor for some cells in the header like delete.
HOW DO YOU set/add/remove a style on a particular cell of the header table of a PagingScrollTable?
THANK YOU
.gwt-ScrollTable .headerTable td {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid black;
vertical-align: bottom;
cursor: pointer;
}
Edit 2 updated this again because the OP's question is finally clear: how do you set a style on a particular cell of the header table of a PagingScrollTable?
PagingScrollTable scrollTable = ...
scrollTable.getHeaderTable().getCellFormatter().addStyleName(row, column, "myStyleName");
where row and column are 0-based integers indicating which cell of the header table to set the style on.
Edit updated this to explain how to set a style on the header, since the person asking the question clarified that's what they want.
If you want to add a style to the header of a PagingScrollTable, just do this:
PagingScrollTable scrollTable = ...
scrollTable.getHeaderTable().addStyleName(row, "myStyleName");
and then put in a CSS rule for myStyleName to set the cursor to whichever one you want, like so:
.myStyleName {
cursor: default;
}
Note that the reason why the cursor is a pointer is that clicking on a column header in a PagingScrollTable will sort the table by that column. To disable that, call scrollTable.setSortPolicy(AbstractScrollTable.SortPolicy.DISABLED
Original answer This will add a style to a column in the body of the table, but not the header or footer:
Since you mention ColumnDefinition I presume you're talking about PagingScrollTable. In that case, the way to add a CSS style to a cell is in the CellRenderer for the cell. Once you've got a ColumnDefinition, do something like this:
CellRenderer<YourRowType, String> cellRenderer = new CellRenderer<YourRowType, String>() {
public void renderRowValue(RowType rowValue, ColumnDefinition<RowType, String> columnDef,
TableDefinition.AbstractCellView<RowType> view) {
view.setHTML(value);
view.addStyleName("myStyleName");
}
};
columnDefinition.setCellRenderer(cellRenderer);
You'll have to change the type parameters of CellRenderer<YourRowType, String> appropriately, but that's more or less how to do it.