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.
Related
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...
I am making a Responsive site using the foundation framework and TinyMCE breaks the format when the page is scaled down(it's not responsive). How do I make TinyMCE responsive?
The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table.mceLayout and the tinyMCE textareas. You will need to enforce these css rules using !important because they would otherwise be overwritten.
E.g., I use css similar to this:
/* on mobile browsers, I set a width of 100% */
table.mceLayout, textarea.tinyMCE {
width: 100% !important;
}
/* on large screens, I use a different layout, so 600px are sufficient */
#media only screen and (min-width: 600px) {
table.mceLayout, textarea.richEditor {
width: 600px !important;
}
}
See this jsfiddle: http://jsfiddle.net/johannesjh/384uf/
Note: You may wish to use different media queries or css classes to make use to the "foundation framework"'s responsive grid.
There is a way to get the toolbars to wrap on smaller screens.
/* make the toolbar wrap */
.mceToolbar td {
display:table-row;
float: left;
}
.mceToolbar td:nth-of-type(11){
clear: left;
}
I made a fork of the fiddle that Johannes posted that includes the above rules:
http://jsfiddle.net/joshfeck/gMVSE/
Making the toolbar responsive for the latest version of TinyMCE:
.tox-toolbar {
flex-wrap: nowrap !important;
overflow-x: auto !important;
}
.tox-toolbar__group {
flex-wrap: nowrap !important;
}
This adds a horizontal scrollbar to the toolbar on mobile devices.
TinyMCE 5.1 was released with a new mobile responsive design.
To ensure it functions as intended, you need to add the following code to the head of your pages that are using TinyMCE.
<meta name="viewport" content="width=device-width, initial-scale=1">
More information here: https://www.tiny.cloud/blog/the-future-of-work-is-mobile-and-tiny-is-ready-for-it
I'm using version 4 of TinyMCE, there is a plugin named autoresize. It makes the editor responsive.
Here is something I use on a site to make the editor resize and the toolbars moves with the size of the page :
.mceEditor table {
max-width:none; /* Bug in computation of fullscreen */
}
.mceEditor table.mceLayout {
width:100% !important;
height:auto !important;
}
table.mceToolbar { float:left; }
body .mceToolbar div {
white-space:normal;
}
Using small toolbar, they are properly layed out as the editor width changes.
"theme_advanced_resizing" should be set to "false". Also, more work is needed to make it work with fullscreen.
Remove Width and height from the TINYMCE_DEFAULT_CONFIG.
then apply your styling normally.
i am using this in the CSS:
div.tox.tox-tinymce {
width: 200px !important;
}
I use !important because tinymce using inline styling for that div, use #media if necessary.
a cropped screenshot from firefox inspector
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 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;
}
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;
}