I'm trying to make an AjaxControlToolkit Accordion control change the header style on mouseover and mouseout. It works fine but when the user mouses over the currently selected header then leaves it the special CSS for selected headers is overwritten by the mouseout class that I've assigned. I'm just using onmouseover="this.className='AccHover'" and onmouseout="this.className='AccMouseOut'" in a <div> tag inside the accordions header sections.
Is there a way to remove the AccHover class on the mouseout event and have it revert back to either the unselected CSS style or the Selected header style depending on the accordion panes state automatically?
I would use:
onmouseover="this.classList.add('AccHover')"
and
onmouseout="this.classList.remove('AccHover')"
EDIT: Ok I just remembered classList doesn't work in IE, I assume that's what you are testing in. In that case I would use something like:
onmouseover="this.className = this.className + ' AccHover';"
and
onmouseout="this.className = this.className.replace('AccHover', '');"
See example http://jsfiddle.net/RgRUN/2/
But I would call your own javascript function rather than write inline.
Related
I am trying to use the Checkbox from https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox.
By default, it will show the check mark when I hover on the checkbox (please see below), whereas I don't want to show that check mark on hover. Is there any props or styles I can set to achieve that?
Paste this in your CSS this will be applied to all the checkboxes in your element.
.ms-Checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
display:none;
}
In case you want to apply only for a specific checkbox make it a class like this
Inside your CSS
.custom-checkbox:not(.is-checked):hover .ms-Checkbox-checkmark{
display:none;
}
In your react component
[Note] this example is from the Microsoft website you provided
<Checkbox label="Unchecked checkbox (uncontrolled)" onChange={_onChange} className="custom-checkbox" />
I have a modal that pops up with tab-able elements. Is there something like jQuery's :focusable or pointer-events: none that would allow me use CSS to disallow focusing on items underneath the overlay?
edit: The problem with a JS based approach (and selectors), is that each rerender with React, the query selector would have to be run through again. I don't have control over the component rendering this modal.
You want to do something along the lines of:
const inputs = [...document.getElementsByTagName('input')];
inputs.forEach((input) => input.setAttribute('tabindex', '-1'));
const modalInputs = [...document.querySelectorAll('.my-modal input')];
modalInputs.forEach((input, index) => input.setAttribute('tabindex', index));
Full Example https://codepen.io/bradevans/pen/GGYxrg
Edit: I hadn't seen the reactjs tag until OP commented... I'd utilize the Modals componentDidMount lifecycle method to change the underlying DOM inputs tab indexes and change the modals at the same time or using internal state....
You may also want to store the old tab indexes and reapply them on componentWillUnmount();
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'm using a button with bootstrap, something like:
I want to disable the style change when the button is hovered or click. I figured I could do this by overriding btn-default:focus or btn:focus but I also have other <a> tags styled as buttons that I would like to keep the effects of click or focus. Is there a way that I could just override the standard bootstrap css in just this case?
add an id to this particular
then add this css
#overrideBS:focus {
//whatever unique properties you want
}
Add your own class myclass, then set myclass:focus with whatever changes your need adding !important at the end of the overridden value.
I have the following checkbox with a class on it, for future use
.class{onClick: "doSomething()"}= check_box #var, :var
But there's a problem. Let's pretend |AAAA| is the buton, if i click on the ==.. it still triggers doSomething().
|AAAA| ====================
I tryied with
display: block
in css but it doesn't work
Thanks
That's because both the label and input area are enclosed in the .class.
Instead, specify via js that you only want the checkbox input to trigger your JS action, and not the label.
= check_box #var, :var, id: 'my-id'
Then:
:javascript
$("input#my-id").click(function() {
doSomething();
});
What is generated html?
Looks like you've set onClick handler to outer div, not to the checkbox.
( I assume you have reasons to use inline javascript instead on unobtrusive one)
There may be 2 reasons this:
1: You have a label tag around the checkbox as well as element containing ==================== (As you said in the question )
2: You may not have given the class to checkbox, rather it is bound to another element that contains checkbox.