How to disable only dropdown and the fieldLabel should be enabled and dropdown should be disabled(not able to select and should be grayed out)
Let me know how we can do it by CSS?
This css will do the job. But its better to use a more specific selector.
.x-form-item-label {
opacity: 1 !important;
}
Alternatively, you can create a DisplayField instead of using FieldLabel and place it near the dropdown.
Related
My question is basically how can I have a child style event affect the parent. Right now I'm using event target to change the style of a table cell I'm hovering over, but whenever I hover over a child with text in it the child changes but the parent does not which doesn't look very good. Here's my code.
hoverBackground = (e) => {
if (e.target.classList.contains(this.state.calendarNavi) || e.target.classList.contains(this.state.calendarNaviEmpty)) {
e.target.style.background = 'darkgrey'
} else {
e.target.style.background = "#b1a18b"
e.target.style.color = "white"
}
}
I've looked for answers for a while but I couldn't find one most people are trying to prevent the child from effecting the parent, but I'm having the opposite problem. I want the child to change the style of the parent and vise versa.
Here's the table data, I'm using Material Design Bootstrap for basic layouts:
<td key={d} day={`${d}`} dayName={`${currentWeekDay}`} month={`${this.month()}`} onMouseEnter={this.hoverBackground} onMouseLeave={this.hoverBackgroundExit} className={`calendar-day ${currentDay} ${currentWeek} railway`} style={currentStyle}>
<MDBContainer>
<MDBRow>
<MDBCol>
{d}
</MDBCol>
</MDBRow>
</MDBContainer>
</td>
P.S. Sorry for the messy looking code, I still have to clean this component up a bit. Also I'm open to better ways of handling this hover event if anyone has suggestions.
I rubber ducked! The problem was using event.target vs using event.currentTarget
I have a dynamicaly created Menu. The code below is just to understand the hierarchy
Menu {
id: mainMenu
MenuItem {
text: "item"
}
Menu {
title: "submenu"
MenuItem {
text: "submenuitem"
}
}
}
Now I need to remove all mainMenu's content. As I can see in the documentation, Menu have methods removeItem, takeItem and takeMenu. Using takeMenu and count property I can access menu's children and remove them recursively. But what if I don't know the order and type of menu items? Item has not property count. I need some universal solution that can remove the item itself, and if it is a menu then remove all it's children.
I don't know if it's the cleanest solution, but it works well to clear your example.
while(mainMenu.items.length > 0)
mainMenu.removeItem(mainMenu.items[0]);
You don't need to go recursively because when you remove an Item, all its childItems are removed with it.
I'm working on one large site and currently all radio buttons look like this:
In my View I have this code:
#Html.RadioButton("new", "new", false, new { #onclick = "New()", #id = "new", #class="radio-button" }) Some Text
And CSS for radio button:
.radio-button label {
width:5px;
}
That width doesn't change anything. How can I remove all that space around radio button and have text near radio button? I was looking in that generated CSS Site.css but I can't find where it's defined to be like that.
Thank you!
Are you definig input width in somewhere else? Its not semantical ,but try
margin:0;
padding:0;
width:5px!important;
If it works, try to "inspect element" with Developer Tools(chrome) to see if it hav any inheritance
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})
How can i change hover color of dropdownlist arrow button ? here when hover on dropdown its in blue color . i want change this to yellow . how can do this?
Alternate solution: use Ajax DropDownExtender you can easily change css style.
<ajaxToolkit:DropDownExtender runat="server" ID="DDE"
TargetControlID="TextLabel"
DropDownControlID="DropPanel" />
visit this link for demo:DropDown Demonstration
this will be done on page load
foreach(ListItem item in ddlName.Items) {
if(item.Value == "someStringValue") {
item.Attributes.Add("style", "color:red")
}
}
If that doesn't work, you can move this code to the DataBound event of the Drop Down List.