This one is bit tricky ,
I created jsfiddle here
http://jsfiddle.net/WXmcL/10/
to kinda replicate the https://chrome.google.com/webstore/category/home
addons containers. all is fine except that a element link.
I need to position the
<a class="link" href="linktoapp"></a>
correctly but also let the users reach the
Info1
since I cant have any ul or divs inside the a element I am not able to achieve this effect. Yes I can do spans but my ratings contain ul , divs etc and I would have more markup inside it. If you check on chrome store you can always link to the app and in same time reach the rating. They put all the elements inside the a tag but the page validation is not seeing it. So it seems to me that is being done with js on load or ?
Thank you!
you should forget about validation whilst you are building your effects for a while. get it to work with the markup you need, then you can sit back and take away what won't validate and inject it via javascript.
mootools has a wonderful Element constructor.
new Element("a.linktoinfo[html=Info]").inject(element);
you can pass on any property into it via the constructor options object.
eg.
new Element("a", {
"class": "foo",
"href": "#",
"events" : {
click: function() {
showInfo(this.getParent());
}
}
}).inject(element.getElement("a.link", 'after');
etc etc.
btw when you morph classes, just make sure it morphs the properties you differ. in your case, it makes sense to make .myInfoOn / .myInfoOff that have the different heights. there is no point in assigning a morph between other values that have not been changed.
that type of morph parses all the css rules defined in the class that you pass on every event and in reality, you are better off setting it manually. it will scale less if it's hardwired, I realise that - but you can set as a variable into your class.
Related
So a little disclaimer: I am completely and utterly self taught. Bear over with me if I'm being a clown.
Anyways, I am currently working on a some platform and in need for a dropdown functionality. That's simple right? Just use HTML5 select tag. However option tags can't be styled :>
So onwards to build my own. The HTML5 select tag uses keyboard input (up/down/enter) for those with disabilities, and I thought I would implement that too. That did present a problem though: The :hover selector collided with my custom attribute, which I use to style keyboard selected items (&[data-selected=true] to be precise).
So onwards to implement my own :hover. And this is where my bewilderment starts.
const handleChildMouseOver = () => {
const items = Array.from(listItem.current?.children!); // The wonders of typescript XD
for (const item of items) {
if (item === event.target) {
item.setAttribute("data-selected", "true");
} else {
item.removeAttribute("data-selected"); // I'm removing the attribute, rather than toggling it, because I got components with 3 states: On, off, and default.
}
}
}
(...)
<ul css={css.list} /*emotion prop*/ data-toggled={toggled} /*parent state*/ onMouseOver={handleChildMouseOver}>
{children} // parent prop
</ul>
So it works as intended, which is fine. But I recall from my pre-react days that you should never manipulate the DOM in loops, as it causes repaints on every iteration. However when I look at the Dev Tools performance profiler, I barely see any "Paints", 8 or so, even when I'm switching hover targets like a madman. What I do see is one million "Composite layer". Oh, and as a bonus React doesn't re-render. Which is fine right? 'Cause I'm not really changing the state of anything, just adding some CSS.
So my question boils down to: Am I being bonkers or smart?
N.B.: I would love to share the actual component, but seeing as this is my first post on stackoverflow, I've got no clue how you do those fancy script tag. Well github is involved somehow, I know that much 🤔
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 an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.
We have roughly 20 error pages, and we are gradually redesigning each.
The parent element, with a class of ehp-container is created by the same piece of code for old and new error pages. Problem is, the new background images provided to me are of a different size, so when I try to apply the styling I need to make them look good for the new error pages (background-size: 100% 93%;), that breaks the old error pages, which use a static background-size.
The options I see:
Modify the builder class to add some sort of an additional class to ehp-container that would distinguish the new error pages (less than ideal, hackish)
Ask the UX team to for new images that match in size (long turnaround)
Can anyone think of anything else?
Apply an identifier to an outer container. Do your error pages have a template (e.g. masterpage/layoutpage). If so, does the old one use a different one from the new one?
If so, add a class name or id to an outer container and reference it in your CSS:
#newerrorpage-outercontainer .ehp-container {
/* attributes */
}
Alternatively, for the code that generates the error page, update it to accept a cssClass parameter and apply this along side the container class name:
.ehp-container.ehp-v2 {
/* attributes */
}
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.