In my web app, I want to have a table where every other row is colored with a different background. I am using GWT and so in my UiBinder file I have some style information like this:
<ui:style>
.productlist {
cursor: pointer;
width: 50em;
padding: 10px 10px 0px 10px;
}
.productlist tr:nth-child(even) {
background-color: silver;
}
</ui:style>
I believe this is the correct CSS as it works in the browser. However, when running the app in dev mode, I get a crash saying the CSS cannot be interpreted. If I replace "even" with "5", I get an error saying the Uibinder expected <IDENT>.
Has anyone used the nth-child CSS selector with GWT before?
This is a known issue.
You can work around this problem by escaping the parenthesis to avoid confusing the poor GWT CSS parser:
.productlist tr:nth-child\(even\) {
background-color: silver;
}
Related
I 've tried to give css to scrollpanel in GWT. But its not working.
The problem is I want to change the foregroung and background colors and also the width of scrollers.
Is it possible? can any1 suggest?
Generally it is based on the browser user agent.
For example : For Chrome You need to do something like,
::-webkit-scrollbar { width: 3px; height: 3px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
Please refer this Link
GWT scrollbars are simply html ones, so you can style them in the same way you would do with plain html: using css.
Add a class to your ScrollPanel and set the styles in your .css files, or set styles to it using java methods.
But you have to be aware that styling scroll-bars is not a standard thing, webkit supports it via vendor-css-properties and the same with IE, but unfortunately you will not be able to style FF.
UPDATE:
As #Andrea suggest in the comment below, if you can change in your app ScrollPanel by CustomScrollPanel you have much more options to customize bars.
In this case you have to provide your own bars because by default it uses browser native ones. This response can help you.
I am in learning phase of GWT GXT,
I my project some of the css are working fine , but some are showing me a strange behavior .
for login button.
logonBtn = new TextButton("Connect");
logonBtn.setIconAlign(IconAlign.RIGHT);
logonBtn.setIcon(Resources.INSTANCE.login());
logonBtn.setStyleName("Project-Button");
Css
.Project-Button {
color: Black;
border: thin outset #FF6600;
font-family: Courier New, Century Gothic, Times New Roman, Verdana, Arial;
vertical-align: middle;
background-position: left center;
background-color: White;
cursor: pointer;
}
But when i run the project , this css is not showing any effect on connect button.
In my Project i have i have 6 or 7 TextButton.
But this css is showing effect in only one of these buttons
I tried to use Firebug to see the problem. I see there is no Project-Button css attached with this textButton.
Attached is the Image of fireBug.
If somebody understand this , please explain and give the solution.
Thanks in Advance.
If tou change GXT Text button style you have to write your ButtonCellAppereance. GXT button styles too complex as other gxt widgets. example link about appereance
1: http://www.slideshare.net/senchainc/ext-gwt-30-theming-and-appearances i started a project on gwt projects as theme project link
but i have no more time to develop. good hacking...
How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:
I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))
!!!!!!!!
UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net
If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code
Output:
1.I all of these from jquery.fancybox-1.3.4.css
just change these 1 2 3 and mess around with example7 there in the demo
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%; /*this part extends the right side of the photo so it would look like thet're on the same page*/
}
2.This re-positions the original title to the upper right part of the image
.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}
3.My new RED div where I will be
div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}
I tried using fancybox in one of my projects but had to revert back to implementing my own popup's using the DIV elements. Its pretty easy to create your own popups instead of using fancybox or facebox if you know a bit of JQuery try to have a look at these links. You can customize your div tags to contain what ever you need.
output
source
In your fancybox JS, set the type to iframe:
$(document).ready(function() {
$('.callout').fancybox({
type: 'iframe',
width: '640px',
height: '480px',
});
});
Then you can open up anything you want in the fancybox by simply applying the class to your link:
<a class="callout" href="{path}">{link}</a>
If you have issues with the iframe display, you might try adding a secondary class to tell fancybox what type of content you are linking to (this is a new convention introduced in the latest version, so I don't know if I'd recommend using it by default):
<a class="callout callout.iframe" href="{path}">{link}</a>
Hope that helps!
ty
It just happened that I created this fancybox "a la" facebook demo that looks pretty much like what you want:
http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
I'm using figure element in an UIWebView.
On IOS5.0 and later, the figure is rendered correctly...
On iOS4.3 the rendering is not correct.
Is there a way to emulate element with a javascript library ?
I found the solution tx Matijs remark.
After adding this CSS, it works now!
figure {
text-align: center;
padding-top: 20px;
display: block;
}
I was wondering if anyone knew how to change the font size of a flextable in GWT? I've tried numerous attempts and looked online everywhere but no solution seems to work. I have a flexTable in GWT, and a number of labels like...
user_info.setText(5, 0, "Organization:");
Currently I've been trying to write a style in a CSS page with the code
.smallFont
{
font-size: 6pt;
background-color: #66ff66;
}
I set the flexTable to that style and the background of the table changes, but the font does not. Any help would greatly be appreciated. I've looked online everywhere. I've even tried changing the default styling page for each component by doing ...
.gwt-FlexTable
{
font-size: 6pt;
background-color: #66ff66;
}
but to no avail...
So discouraging = (
I used firebug to find out the CSS styles of GWT, then in my CSS file I used "!important" to override the existing CSS styles. There is an example below.
.gwt-TabPanelBottom {
border-width: 1px !important;
background: none no-repeat scroll center center #F6F6FF !important;
padding: 0 !important;
border: 2px solid #BFCC99 !important;
}
Override the CSS imported via your XML with the !important statement.
Or if needed, you can just download those base css files, manually include a copy of them, comment out everything in the xml, and have full style control.
Here's the clean.css file for example:
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/theme/clean/public/gwt/clean/clean.css?r=10894
Specifically, to change the font in a GWT Flex Table (assuming you are importing clean.css), add this example to your custom css file and override the table td style you imported:
table td{
font: 18px Arial, sans-serif !important;
}