while trying to change the background color of disabled dates to red, using disabledCellCls seems to have no effect on disabled dates. How to make this work..
Fiddle: https://fiddle.sencha.com/#fiddle/4io
Thanks
Since this a bug, one workaround is to use 'cls' config instead of 'disabledCellCls' and additional selectors in css .x-datepicker-disabled a.x-datepicker-date
Sample fiddle: https://fiddle.sencha.com/#fiddle/4ph
Related
I'm attempting to set the text highlight colors in my project that uses TailwindCSS. This can be done fairly easily using the "selection" modifier that Tailwind provides. This works fine except when I try to set different colors for dark mode. I can't figure out what I'm doing wrong but I can't find anything online regarding how to correctly use the "dark" and "selection" modifiers in conjunction.
I tried the following syntax in attempt to get it to work correctly:
<html className="selection:bg-blue selection:text-purple dark:selection:bg-pink dark:selection:text-blue">
However, this only picks up the selection:bg-blue selection:text-purple styles and not the dark mode selection styles (dark:selection:bg-pink dark:selection:text-blue) when dark mode is activated.
Any thoughts on what I'm doing wrong? Thanks in advance.
Edit:
The colors do exist in my tailwind config:
I figured this out. I wasn't thinking and realized what I was doing wrong was putting the selection classes on the HTML tag. The HTML tag is where the dark mode class gets applied and due to this, the selection class wasn't a descendant of the .dark mode class. To fix it, I moved the selection classes to the body tag.
In bootstrap uib-collapse class animation behaviour hapeens only for vertical div.
But I need same animation/motion behaviour for table columns to show or hide upon click on icon.
For rightnow using ng-show and ng-hide but that doesnt seems animation behaviour not look good.
How can I achieve same behaviour for table colum wise NOT row
uib-collapse has a horizontal option and all you have to do is to add an additional attribute called 'horizontal' for the panel div as follows.
<div uib-collapse="isCollapsed" horizontal></div>
There is an issue recalling this problem and there is a workaround for it but as it's mentioned it's not recommended to use that.
Doing some further investigation, this appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. It seems that even when using vanilla Bootstrap JS, one has to hack around it too.
Here is a workaround that works - I am going to close this issue as not a fixable bug unfortunately. Thankfully, one can work around this, as my Plunker shows.
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
I'm new to AngularJS and I'm learning it independently.
I read about ng-if using the official AngularJS website.
I got an exercise which I need to scan a color, and if the color is white (#fff in hex), I should change the span's background-color to black (#000 in hex).
This is what I've tried JSbin.
I involved Javascript because I don't know how to deal with CSS on Angular and I think that's they reason why the code is not working as expected.
Sorry for being ignorant.
Thanks in advance.
You don't use inline JS (onclick) when you have ng-click (or at all, for that matter). I suggest you take a step back and make sure you understand what's going on, and not just put in random bits of code in hope they would give you what you want.
Here's an updated demo.
First, I removed the onClick. then I changed the function to be included in the scope as that's the only way things you put in things like ng-click can find those functions. Last, I changed added a backgroundColor variable to be set to the desired color when the button is clicked, and changed the style attribute of the output element to have a background-color rather than color like you had.
Also, I don't see how ng-if has anything to do with this.
This question is specific to Adobe CQ5, so ExtJS answers by themselves won't be that helpful.
I have a custom text component with a menu option to change the background color. We're referencing a colorfield component in our dialog.xml, and so far everything works. The color menu appears with the default set of colors in the palette and can be clicked. So far so good.
I would now like to customize the palette and only show a select set of colors specific to our client. How do I achieve this?
Here's the relevant dialog.xml snippet so far:
<bgcolor
jcr:primaryType="cq:Widget"
fieldLabel="Background color"
name="./bgColor"
showHexValue="true"
xtype="colorfield"/>
For future reference, you could probably get by creating a custom ColorField to call a custom ColorMenu which sets a custom ColorPalette. If ColorField had configurable options, these would probably be mentioned in the Ext docs or found in the JS file itself in /libs/cq/ui/widgets/..
Found it on dev.day.com - http://dev.day.com/content/kb/home/cq5/Development/HowToCreateCustomClientLib.html
Simply put, override the ExtJS widget with your own. Not ideal but it'll do.