I need to make the wrap of column headers, as column headers alignment is going beyond limit. So for that I think we need to override "div.z-grid-header th.z-column" CSS class. But if I override the same at page level it is not allowing, throwing exception. I tried to override via ZK.xml as well but no luck. Can anybody help me out?
You can easily override it in page level with the style tag in the zul :
<style>
.z-grid-header {
//your css
}
</style>
<style>div.z-grid-header th.z-column, div.z-grid-header th.z-auxheader{
white-space:normal;
}
</style>
This solved my problem !
Related
Is there any way to programmatically collapse the empty space that results when a google ad does not show? If so, I would love to see an illustrative example of the same.
Searching around has led me to this official Google resource for accomplishing exactly what I've asked. However, that pertains to Doubleclick for Publishers, which is unfortunately a separate product. I'm pining to know how to handle this for AdSense - some of my users are staring at empty spaces at the moment.
In case it matters, here's an example ad snippet provided by Google AdSense (which I've center-aligned):
<div style="text-align:center">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0044031319"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
I know this is old, but since I've been dealing with this now. A simple enough way to do this in jQuery is to check for all elements with the class adsbygoogle that have no child inside.
This selects all the elements with that class and hides them, effectively collapsing them.
$(".adsbygoogle:empty").hide();
You can do a lot of other stuff with it too, like if it's in a div and you need to hide that too, use the $(".adsbygoogle:empty").parent().hide() to collapse it further.
I'm sure this can be done with vanilla javascript as easily. I suggest to run this line of code after the DOM has loaded and even wait like 10 seconds just to see if google populates the ads.
But now it is very simple, just insert this CSS;
<style>
ins[data-ad-status=unfilled] {display:none!important}
</style>
I noticed that the AdSense code broadcasts a MessageEvent, so when I get a resize-me type event, with 'r_nh': 0 key/value pair, I hide the AdSense container (CSS class adsense-ad) manually.
If you have multiple AdSense containers on the same page, you could try to also parse the qid key from the same message.
window.addEventListener("message", (event)=>{
try {
let message = JSON.parse(event.data);
if (message.msg_type === 'resize-me') {
let shouldCollapseAd = false;
for (let index in message.key_value) {
let key = message.key_value[index].key;
let value = message.key_value[index].value;
if (key === 'r_nh' && value === '0') {
shouldCollapseAd = true;
}
}
if (shouldCollapseAd) {
$('.adsense-ad').hide();
}
}
} catch (e) {
}
});
The link provided which refers to DFP Premium at this point redirects to documentation for Google Ad Manager, so it's possible this feature is available without DFP Premium at this point.
Aside from that...
Usually the existence of an iframe element where you expect it is enough to know whether an ad was put where you were expecting one to be put, or not, in my experience.
setTimeout(function () {
if (!document.querySelector('#adcontainer').querySelectorAll('iframe').length > 0) {
document.querySelector('#adcontainer').remove();
}
},1000*2);
As to whether something useful was loaded into that iframe—that isn't something Google is concerned with, so good luck, you'll need it.
I tried to solve it with CSS as Adsense injects various iframe,ins, and divs with various properties.
This code will collapse whitespace but when you ad is in text, it will overflow some of the text, so inline this needs modification:
<style>
iframe { height: auto !important}
ins { height: auto !important}
#google_ads_frame1 { height: auto !important}
.adsbygoogle, #aswift_0_expand, #aswift_0_anchor { height: auto!important} /* there might be more of those */
</style>
I'm trying to use the Grid component but I can't find out how to use the CSS API. Ths docs doesn't help me. I just don't get it..
Can someone please help me ?
I know this is not a really good place, sorry, but I can't find any answer anywhere confused
Ideally, you'd set direction to row and override the direction-xs-row class with the name of a class you define (which would set direction to column-reverse), but there are no classes exposed for overriding row for any breakpoint.
You could go the other way, setting direction to column-reverse and overriding direction-*-column-reverse (for all other breakpoints), but that would be tedious and somewhat insane.
The only way to do this at the moment would be to set the className prop to apply some responsive styling via JSS and withStyles:
// create a class that will set flex-direction for the xs breakpoint
const styles = theme => ({
[theme.breakpoints.down('xs')]: {
responsiveDirection: {
flexDirection: 'column-reverse',
},
},
});
// use withStyles to make the class available via the `classes` prop
export default withStyles(styles)(InteractiveGrid);
Then pass your class name, classes.responsiveDirection in this example, as the Grid's className prop:
{/* we would normally destructure classes from this.props */}
<Grid
container
className={this.props.classes.responsiveDirection}
>
Check this codesandbox for a working example.
I want to change stacklayoutpanel header back ground color using css and I tried everything.
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader .gwt-StackLayoutPanelContent .gwt-StackLayoutPanelItem {
color: red;
border:red;
border-color: red;
background:red;
background-color:red;
}
But only changed the text color and I don't want that. Please can you explain how can I do that?
StackLayoutPanel wraps hour header widget/text to an internal class named Header, which is not publicly accessible. One approach is to override default clean.css .gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader styles by copying it to your own css file, then appending !important to styles you want to change.
However, better and cleaner solution is to do the following:
// add/insert your item first
myStackLayoutPanel.add(widget, header, size);
// retrieve the Header internal widget (AFTER ADDING!)
Widget internHeader = header.getParent();
// replace default style
internHeader.setStyleName("my_custom_style");
If you don't like using class css styles, you may alternatively do something like:
... same as above
// reset the default style
internHeader.setStyleName("");
// then add your styles programmatically
Style style = internHeader.getElement().getStyle();
style.setBackgroundColor();
etc.
It is important to retrieve the internal header widget after call to add/insert!
Your CSS style is incorrect. It's trying to target classes with the following hierarchy:
.gwt-StackLayoutPanel
.gwt-StackLayoutPanelHeader
.gwt-StackLayoutPanelContent
.gwt-StackLayoutPanelItem
Which is completely incorrect. If you want ALL elements with those classes to have the same background color, you would write your CSS rule like this:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanelHeader,
.gwt-StackLayoutPanelContent,
.gwt-StackLayoutPanelItem
{
background-color: red;
}
You better create your own css file based on gwt's default and make changes there. You also need to exclude gwt default css from your_module.gwt.xml and put there your newly created
I need a option to hide the header from a dojox.grid.DataGrid grid.
Didn't find anything.
I'm grateful for any info!
I use in dojo 1.6 (and probably works since dojo 1.3)
#myGrid .dojoxGridHeader { display:none; }
You can use CSS:
.dojoxGrid-header { display:none; }
This solution is taken from:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
u can connect at the postrender of the data grid. then find the headerGrid element created
then put style display to none.
//workaround the grid calls postrender after
//the component is at the dom.
//so then i can change the style to reset the header to invisible
dojo.connect(grid,"postrender",function(){
var headerGrid =this.domNode.firstElementChild;
headerGrid.style.display="none";
});
I would recommend switching to using the new and improved dgrid instead of datagrid, it is a lot better!
The setting for hiding headers is the attribute 'showHeader' which is a boolean value.
Check out this dgrid tutorial that talks you through defining grid structures including 'showHeader'.
I see nothing in the documentation except a reference to include some "CssResource" and get it with ClientBundle, but how do I exactly override the tbody and th of a CellTable?
Is this possible?
Create an interface:
interface TableResources extends CellTable.Resources {
#Source({CellTable.Style.DEFAULT_CSS, "<your css file>.css"})
TableStyle cellTableStyle();
}
interface TableStyle extends CellTable.Style {
}
and initialize the cell table:
CellTable.Resources resources = GWT.create(TableResources.class);
table = new CellTable<SomeProxy>(rowSize, resources);
In the cellview.client package you can find the default gwt css files. Yo use those as your starting point. In the "<your css file>.css" put you specific style changes.
You can also set colum style (on the col element):
table.addColumnStyleName(colNumer, "some_css_style_name");
or better use css resource name instead of string "some_css_style_name".
Just for the fun of it I might add something I just had a headache with... if you change cellTableStyle(); with something else it breaks... no warning or error, the CSS just does not appear as I thought it would. Dont know where this is documented, but I found it out after alot of fiddeling trying to find out why some CSS was correct and some not..
For some reason my cellTable.addColumnStyleName(colNumber, "cssStyle") just won't work. According to FireBug it doesn't add the style no matter what (if the style was incorrect, it at least could have added it to the classes attribute of the th-element...). Maybe it's because I am redrawing the columns, but it'S weird nevertheless.
I've used the solution above, however, if you have another table with default styling, it ends up making with your custom table. Are you required to override all your tables with custom styling, or is there some workaround?
Also, I find the CellTable constructors less than optimal... I have to specify pageSize to specify the style resource CellTable(pageSize, resources)... I've been putting Integer.MAX_VALUE for pageSize, not sure if that should be -1 or something else as there's no javadoc on that value.