I have some code in HTML and CSS where HTML looks like this:
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
And my CSS looks like this:
#avmenu
{
Style details
}
#avmenu li a:hover
{
Style details
}
a:hover{ Hover styles }
So above piece of code shows a menu item and does some animation like color change etc when you hover your mouse over the menu. I have show bare minimum styles sufficient to explain problem at hand.
Now when I migrate this to GWT. We have used Label as menu items, and I want to achieve same effect in GWT too. Here is what I have tried
I tried to apply CSS Style named "avmenu", this applied basic styles, but of course didn't get animation
Then I tried DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); but that also didn't help.
What would be my best option with minimal time and effort to achieve same effect? I can of course listen to events on Label and then change the style, but doing that for all of the widgets would be an overkill!
EDIT- More info: I am building Menu using Label, and adding that to tree
userMgmtLbl = new Label("User mgmt");
userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE);
treeItem_1 = configParentTL.addItem(userMgmtLbl);
userMgmtLbl.addClickHandler(Click logic)
One of the problems that you're running into is that Tree and TreeItem in GWT are composed of arbitrary divs, rather than ul and li as in your original html. (When indoubt you can inspect the DOM of GWT's showcase to see how the underlying widgets are created).
What this means is that your selectors, such as "#avmenu li a:hover" will no longer work.
If your navigation menu is static, your best bet is probably to use GWT ui-binders, which are basically gwts templating system. If you use a HTMLPanel as your root widget, you can effectively use all your original HTML verbatim and not worry about trying to mash all the DOM elements into corresponding widgets.
A basic widget would look something like this:
NavigationWidget.java
public final class YourWidget extends Composite {
YourWidget() {
initWidget(binder.createAndBindUi(this));
}
private static final Binder binder = GWT.create(Binder.class);
interface Binder extends UiBinder<Widget, YourWidget> {}
}
NavigationWidget.ui.xml
<ui:UiBinder
xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
xmlns:ui="urn:ui:com.google.gwt.uibinder">
<gwt:HTMLPanel>
<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li>Welcome!</li>
</div>
</gwt:HTMLPanel>
</ui:UiBinder>
As an aside, in this example HTMLPanel adds a DIV of its own to the DOM, making the second div a bit redundant. Unfortunately, widgets in gwt don't have an easy way of setting the ID attribute from templates, so you're stuck with the second div unless you want to switch your #avmenu selector to .avmenu
Post how you are building menu in GWT. You are probably not using anchors inside your labels so your :hover styles are obviously not working.
Related
I want to add a custom CSS Class to a dijit/layout/ContentPane so I'm able to style it myself.
This is cause I got more than one tab in my TabContainer where my ContentPanes are located and I don't want to double the borders. Using a border all around the Tab will double the border so I removed the left border of the tabs. In the first tab in the TabContainer I need the left border, too.
To get this I tried to assume the first ContentPane a custom CSS class which will do it.
As you see me writing here, I didn't find a way to do this.
I tried it within the data-dojo-props with
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">
So this didn't work. I tried to add it like I do it in a simple HTML element with class="firstTab"
<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">
Both ways didn't add my class to the ContentPane.
So how is it done?
The class property is actually not used for that kind of purpose, but it used for identifying of which type the widget is.
However, the class attribute should work, because declarative widgets usually keep their parent attributes. If I have the following HTML:
It eventually gets rendered into:
<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent">
Hello
</div>
However, please note that when using a dijit/layout/ContentPane inside a dijit/layout/TabContainer a lot of additional CSS is added, possibily overriding your own CSS.
For example, for overriding the background color of a tab inside a dijit/layout/TabContainer, I had to use the following CSS selector:
.dijitTabContainerTop-dijitContentPane.test2 {
background-color: #D4D4D1;
}
Demo: http://jsfiddle.net/Lcog9saj/
But also, be aware that the borders generated by the TabContainer are not applied to the ContentPane itself, but to an element with classname .dijitTabContainerTop-container (part of the TabContainer itself).
If this really doesn't work, then you can always access the domNode property of the widget you're trying to alter, for example:
require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) {
ready(function() {
domClass.add(registry
.byId("myContentPane")
.get("domNode"), "test2");
});
});
It's that simple that I didn't get it.
All you need to do is adding an ID to the ContentPane.
Dojo generates a widgetID with it like "dijit_layout_TabContainer_0_tablist_myID"
If the TabContainer itself has an ID, it could be different. Just have a look at the generated code.
Now you're able to get it with dijit.byId.
At the end it looks something like:
var tab = dijit.byId("dijit_layout_TabContainer_0_tablist_myID");
domClass.add(tab.domNode,"myClassName");
domClass is a part of dojo. For using it you just need to require it "dojo/dom-class"
I have a couple of questions about styling a JavaFX application with CSS Selectors (such as: .table-view for every TableView).
I have created a main CSS-file, in which I want to define the universal style properties for my application. For example: every TableView gets the same color in every screen. I just import the Main.css in every .css that is associated with a .fxml file.
Now I would like to style every HBox in a 'sidebar' the same way. I have tried it like this (as suggested in Oracle's documentation):
.sidebar > .hbox {
/* Just some styling */
}
This is not working to my surprise, but the following pieces of code are working:
.sidebar > HBox {
/* Just some styling */
}
.sidebar HBox {
/* Just some styling */
}
Maybe it has something to do with the fact that .sidebar is a custom style, but I am not sure about this.
So my questions are:
1. Why isn't the first one working?
2. What should be the way to do this? (with .hbox or HBox and > or nothing?)
As you can see in the CSS documentation the HBOX class has no style class defined. Therefore you can't simply use .hbox
http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#hbox
If you want to lookup only direct children of the toolbar the > sign can be used. Using the > sign in a CSS selector will have some benefit in performance issues because by doing so not the complete child hierarchy under the Toolbar Control need to be scanned. Matching Nodes will only be searched in the first hierarchy of children.
So if you want to select all buttons that are direct children of a sidebar you can do the following:
. sidebar > .button
But if you really want to style all button in a sidebar (even if they are wrapped in panes, etc.) you need to use the following selector:
.sidebar .button
Back to your HBOX question: Even if the HBOX has no defined style class (.hbox) it has a type that can be used for a type selector. As described in the CSS doc all nodes have a type:
Node's getTypeSelector method returns a String which is analogous to a
CSS Type Selector. By default, this method returns the simple name of
the class. Note that the simple name of an inner class or of an
anonymous class may not be usable as a type selector. In such a case,
this method should be overridden to return a meaningful value.
Because of that the HBOX selector is working.
How do you set the height of the Angular UI-Select widget when an item is selected. I have a custom template for the selected item that includes an image and stuff and it gets cut-off.
Is there an option somewhere? I feel like it should expand to fit the template.
I just fixed this by using the css like
.ui-select-choices .item {
height: auto !important
}
and using the !important css function because ui-select has a lot of inline styles and it gets very tedious to fix. If you are using your own template, try not to use the .item class and use something unique like .select-choice-item Next time you might want to provide the structure in the template you're using so we can answer you with a more specific solution.
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.