hi all I have a MenuItem that im dynamically adding childrent to using the following code
MenuItem c1 = new MenuItem("text","value");
parent.ChildItems.Add(c1);
however I need to add a css class to it at the the same time something like
c1.cssClass = "cssclass";
or
c1.attributes.Add("Class","cssclass");
does anyone know how?
MenuItem doesn't have a CSS class property, instead add the class to the parent Menu:
Menu menu = new Menu();
menu.CssClass = "myclass";
If you want to dynamically add classes to the menu then try creating a helper method (Extension Methods in C#):
public static class MenuExtension
{
public static void AddCSSClass(this Menu menu, string className)
{
// additional code here to tidy / remove duplicates etc.
menu.CssClass = string.Concat(menu.CssClass, " ", className);
}
}
Since our Menu renders a UL you can then use CSS selectors to cascade the style to all child LI elements:
.myclass > li {
// your attributes
}
Or alternatively, specific LI elements (things like nth-child etc are only supported in CSS 3.0):
.myclass > li:first-child {
// your attributes
}
.myclass > li:nth-child(1) {
// your attributes
}
You can try with MenuItemStyle property of your menu
Link : http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.menuitemstyle.aspx
Related
I wan to make 2 different styles of button in one css. So when creating the second button i added class to it using:
close.getStyleClass().add("close-button");
so now i can reference this button in css by:
.button.close-button
But now i dont know how to reference pseudoclasses of button when using the .close-button class.
I tried accessing it by
.button.close-button:selected
or
.button:selected.close-button
Nor of these seems to work. Is there any way how to do it? Or do i have to create my own pseudoclasses for the .close-button class and add and remove them in listeners of the btton in code?
I am creating the button using:
Button close = new Button("X");
close.getStyleClass().add("close-button");
close.setOnAction((event) -> {
....
});
Than i am adding it to the layout:
HBox hbox = new HBox(rbSelect, label, pane, close);
my css looks like:
.button {
...
}
.button.close-button {
-fx-background-color: #E81123;
}
.button:selected.close-button {
-fx-background-color: greenyellow;
}
The button looks like this:
When i click on it:
Seems like nothing happens, when i would expect the button to change color to greenyellow
I'm not 100% sure this is necessary, but by convention the pseudo class selector is added after the class selectors:
.button.close-button:selected {
-fx-background-color: greenyellow;
}
However there is no selected pseudo class for Button. It's available for CheckBox and ToggleButton, but not for regular Buttons. Pseudoclasses that are available are :pressed and :hover, see css reference.
You could of course add the pseudoclass yourself, assuming you're using JavaFX 8:
PseudoClass selected = PseudoClass.getPseudoClass("selected");
close.setOnAction((event) -> {
....
close.pseudoClassStateChanged(selected, true);
});
I have a button component in extjs.
For this component CSS has been set like class='one btn-exit-cls three four five x-menu-active' .
in that the class name btn-exit-cls is unique.
when this button is clicked a menu appears which adds the CSS class name x-menu-active to the class
I wanted to set rule for btn-exit-cls and x-menu-active combining both. So that I can apply menu active style for various buttons.
What I am expecting is
.btn-exit-cls .x-menu-active {
//some css
}
.btn-delete-cls .x-menu-active {
//some css
}
.btn-add-cls .x-menu-active {
//some css
}
I don't want to modify the existing CSS. I just want to override.
If you want to target elements that have both classes, you must write them without a space between them:
.btn-exit-cls.x-menu-active {
...
}
Otherwise, if you wirte it like this:
.btn-exit-cls .x-menu-active {
...
}
you are targeting elements with class x-menu-active that are descendants of elements with class btn-exit-cls
you just need to remove the spaces between classes, so it will be like this :
.btn-exit-cls.x-menu-active {
//some css
}
.btn-delete-cls.x-menu-active {
//some css
}
.btn-add-cls.x-menu-active {
//some css
}
So..
Your CSS code .btn-exit-cls .x-menu-active means :
Select all elements with the class name x-menu-active that are decedents of the element with a class name of btn-exit-cls. such as this code :
<div class="btn-exit-cls">
<div class="x-menu-active">
//some HTML
</div>
</div>
But the other code .btn-exit-cls.x-menu-active means :
Select the element which has a class name of btn-exit-cls and also a class name of x-menu-active. such as this code :
<div class="btn-exit-cls x-menu-active">
//some HTML
</div>
This small space between the two classes makes a huge difference in what it does
Hope this will help you ...
I have a check box with many span tags, some of the have the same css class id.
What i am looking for is:
When the checkbox is clicked, the color of the span tags which have the same css class id to be changed.
Not sure this is what you are looking for:
$('input[type="checkbox"]').bind('click',function() {
if($(this).is(':checked')) {
var myClass = $(this).attr("class");
$('span.' + myClass).css("color","red");
}
});
http://jsfiddle.net/NnFhM/
If you want to add/remove a class on check/uncheck:
$('input[type="checkbox"]').bind('click',function() {
var myClass = $(this).attr("class");
$('span.' + myClass).toggleClass('edit');
});
http://jsfiddle.net/NnFhM/1/
Has anyone had any success applying your own CSS style to GWT's NotificationMole.
If I add my own stylename then that style only applies to the outer DIV which is NOT removed when the mole is hidden, and I can't fing a way to apply style to the inner divs...
A dirty solution :
package com.google.gwt.user.client.ui; // important for package visibility access
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.SpanElement;
public class NotificationMoleHelper {
protected NotificationMole notificationMole;
public NotificationMoleHelper(NotificationMole notificationMole) {
super();
this.notificationMole = notificationMole;
}
public SpanElement getNotificationText() {
return notificationMole.notificationText;
}
public DivElement getHeightMeasure() {
return notificationMole.heightMeasure;
}
public DivElement getBorderElement() {
return notificationMole.borderElement;
}
/**
* Change heightMeasure's background color
*
* #param backgroundColor
*/
public void setBackgroundColor(String backgroundColor) {
getBorderElement().getStyle().setBackgroundColor(backgroundColor);
}
}
Example :
final NotificationMoleHelper notificationMoleHelper = new NotificationMoleHelper(notificationMole);
notificationMoleHelper.setBackgroundColor("#FF1111");
Well your NotificationMole has an associated ui.xml file, so any custom styles you want to apply should be applied there.
This might be easy: define your own style first, after init of the NotificationMole, just replace its built-in class with your defined ones, that's what i did in my project. Using DOM to replace classes or using gwtquery, both are OK.
A further alternative which might be more palatable for some people:
Set the id of the mole mole.getElement().setId("mole"); or mole.ensureDebugId("mole")
Then in your ui binder file add style:
width: 200px !important;
height: 60px !important;
}```
I tried without the !importants but gwt was including default widths and height so it wasn't listening to my styling. You won't need the !important if you add styles that gwt doesn't add by default.
Is there a way to hide the checkbox icon for an ListItem and just display the value-text.
Like Below - Checkbox for items is hidden.
I could figure out that I could disable (grey-out) or completely hide (invisible) a list item but not just hide the checkbox icon (square)
I recently did this as part of a project and accomplished it via setting an attribute when creating the ListItem and then using CSS to style it.
li.Attributes.Add("id", "removecheckbox");
Since the attribute is added as part of a tag, you can use the following descriptor in your CSS.
#removecheckbox
{
color: Gray;
}
#removecheckbox input
{
display: none;
}
Of course, you can format the CSS any way you'd like, but this should get you started.
If you'd like more information using selectors in CSS, check out this reference from w3.org.
HTH!
CSS3 will help you, define Inline style, good point is to make special UserControl for CheckBoxList to use following solution
<style>
input:disabled {
display: none;
}
</style>
and in CheckBoxList PreRender event disable ListItem to apply CSS input:disabled selector
protected void CheckBoxListMajad_PreRender(object sender, EventArgs e)
{
foreach (ListItem it in this.CheckBoxListMajad.Items)
{
if (it.Value.Equals("0"))
{
it.Enabled = false;
it.Selected = false;
it.Attributes.Add("style", "font-size:14px;height:16px;font-weight:bold;");
}
}
}
CheckBoxListMajad.RepeatColumn=3