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
Related
I used this code to disable an item inside a combobox
Disable specific items in QComboBox (it's ok)
And I would like a visual feedback. I would like to put the disabled item in red.
I tried this code but it doesn't nothing.
QComboBox::item:!enabled
{
color:red;
}
I think that it's somewhere in the drop-down. But this code doesn't work also :
QComboBox::drop-down:item:!enabled {
color:red;
}
The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector (from documentation).
so try as said below,
QComboBox QAbstractItemView::item:!enabled {
color:red;
}
The solution suggested did not work for me, but the one below:
QComboBox::item:!enabled {
color:red;
}
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 want to hide the down arrow symbol in the #Html.DropDownList. How to override the default dropdownlist style.
Please see the image below.
You can use css to set custom apperiance to your dropdown:
.customDropDown { -webkit-appearance: none; -moz-appearance: none;
// add background image what you like
}
And add this class to your dropdown :
#Html.DropDownList("DropDownID", String.Empty, new {#class="customDropDown "} )
You can override default styles from native CSS, but it while support only web-kit borwsers
.dropDown{
webkit-appearance:none
//and change style whatever you want
}
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
I know this has been asked countless times before, and they all seem to be resolved by this approach, Although I can't seem to get it to work for my situation.
I'm moving away from CSSFriendly as it is not supported in .net 4 (unless I render it as 3.5), and I'm close to mimicing the functionality using the default CSS styling, although I'm stuck on one issue - Parent selected.
I've read a few solutions on SO and .net forums, although I still can't get it to work for my situation, here is my predicment:
I have an asp.net 4 Menu in a masterpage together with a SiteMapDataSource which loads from a site map. When clicking on the child node, I want its parents CSS to change as well.
Here is a simplified version of my sitemap
<siteMapNode Parent - hidden/no url>
<siteMapNode Home - url="~/" >
<siteMapNode Item - no url >
<siteMapNode Item-child1 - url = "~/child"/>
<siteMapNode Item-child2 - url = "~/child2"/>
</siteMapNode>
</siteMapNode>
All the CSS styling works fine, however I have a horizontal menu which before the ul li css would change as the CSS attribute was "selected". However now, the .net 4 implementation only selects the menu item you select.
I've tried to manually select the parent on the MenuItemDataBound hook, although this does 2 things:
Applys "selected" to the 'a' tag (I need to style the ul li)
Deselects the sub menu item (I can't have both items selected)
Heres the CSS:
.elfabMenu{position:relative;}
.elfabMenu ul li a.popout{padding:0px !important; background-image:none !important;}
.elfabMenu ul{display:block;width:961px!important;margin:0;padding:0}
.elfabMenu ul li{font-family:Arial,Helvetica,sans-serif;font-size:13.5px;background:url(../images/menu_sep.png) no-repeat scroll left bottom transparent;text-decoration:none;color:#000;line-height:38px;padding:10px 23px 0}
.elfabMenu ul li li{background-image:none!important;width:230px;border-bottom:1px solid #000;border-top:1px solid #121212;padding:0;background-color:#0E0E0E;color:#ffffff}
.elfabMenu ul li li a{color:#ffffff; padding:5px 0 5px 15px}
.elfabMenu ul li li:hover{background-color:#000!important}
.elfabMenu ul li li a.selected{background-color:#000!important}
.elfabMenu ul li a.selected{background-image:none!important}
.elfabMenu ul li li.has-popup{background:url(../images/primary-menu-current-children.gif) no-repeat scroll 210px 20px #0E0E0E !important}
.elfabMenu ul li ul li ul.level3 {margin-top:-1px!important}
Heres the databound method:
void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected == true)
{
e.Item.Selected = true;
e.Item.Parent.Selectable = true;
e.Item.Parent.Selected = true;
}
}
}
Hopefully I'm just overlooking something here, but its driving me mad! Would very much appretiate someones help.
Cheers,
Rocky
Update
By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the <a> tag of the menuitem list. I've changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.
Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:
protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected)
{
MenuItem parent = MenuParent_Recursion(e.Item);
parent.Selectable = true;
parent.Selected = true;
}
}
}
static MenuItem MenuParent_Recursion(MenuItem item)
{
if (item.Parent == null)
{
return item;
}
return MenuParent_Recursion(item.Parent);
}
Slight modification of this worked for me.
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected)
{
if (e.Item.Depth == 1)
{
e.Item.Parent.Selectable = true;
e.Item.Parent.Selected = true;
}
if (e.Item.Depth == 2)
{
e.Item.Parent.Parent.Selectable = true;
e.Item.Parent.Parent.Selected = true;
}
if (e.Item.Depth == 3)
{
e.Item.Parent.Parent.Parent.Selectable = true;
e.Item.Parent.Parent.Parent.Selected = true;
}
}
}
Not sure why my depths were one lower, maybe because I have ShowStartingNode="False" on my site map.
This probably isn't the real issue, but it seems that even if you get the selected class onto the li, you don't yet have a css declaration (eg li.selected {...}) that does anything with it.
Answering my own question - By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the tag of the menuitem list. I've changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.
Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:
protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
if (SiteMap.CurrentNode != null)
{
if (e.Item.Selected)
{
MenuItem parent = MenuParent_Recursion(e.Item);
parent.Selectable = true;
parent.Selected = true;
}
}
}
static MenuItem MenuParent_Recursion(MenuItem item)
{
if (item.Parent == null)
{
return item;
}
return MenuParent_Recursion(item.Parent);
}