I used color picker to change color but it didn't work on popup window.
I have some html code which is dynamically added and i want to apply color to text. How i can apply color by using popup page?
The default zIndex of the JSColor popup is probably too small. Because of that the popup is not shown. Go into your jscolor.js file and change the zIndex to 9999
this.zIndex = 9999;
#Captuszz is correct that this is probably an issue with the popup's z-index being greater than jscolor's default z-index (1000).
Changing that default would be one possibility. An alternative would be to set the z-index for that particular jscolor instance via configuration:
<input class="jscolor {zIndex:9999}" value="ab2567">
The "right" z-index value just needs to be greater than the popup's, so I'd suggest looking at the popup's value and then adding 1. Jumping straight to the maximum possible value could end up being a problem later if something else needs to be even more foregrounded.
Also be aware that the jscolor popup isn't rendered within the popup div, so click events within the color picker count as "outside" the popup.
Related
I know that I can add option to TinyMCE toolbar to change selection styles using toolbar setting with keyword styleselect. I also know I can adjust the contents of the menu that opens with that button using setting style_formats combined with formats. (Above is correct for version 5.10.2.)
Is there some way to configure the rendering of the styleselect option in the toolbar? I would want to swap the text label to single icon on smaller displays. For big viewports the feature to show the current style at the caret location is a nice feature but for narrow viewports it would be better to have custom icon instead of partial style name in the toolbar.
I've downloaded the latest JSColor (version 2.05) and i seem to have a problem regarding using it inside a lightbox (like FancyBox or FeatherLight).
When i click on the input textbox (which has the class of JSColor), I'm expecting to see the color picker, but it is opened underneeth the lightbox, and therefore we can't see him (it is like.. the lightbox is above it).
Any idea what can i do to make it visiable above all the windows / lightboxes?.
Thank you.
After searching the net, it appears that i needed to adjust the z-index of the FancyBox and of the ColorPicker. After supplying higher z-index for the color picker? => it became visible above the FancyBox.
I'm using WIX navigator in my react native app, and I'm animating a component based on whether or not the keyboard is showing. My problem is that the bottom and endCoordinates change depending on if the drawUnderTabBar style setting is true or false.
Obviously, I can get/set the value of drawUnderTabBar, but how do I get the height of the tabBar when it's showing?
Looking in the source code is a good way to start.
Is there any way to make a widget's config and move buttons be placed at the top of the widget itself.
As it is one has to hover over a widget in order to see which one of the items in the widget zone it belongs to. This is impossible though when the content of the widget is not in the same screen space (I had to zoom out in the browser in order to get the below screenshot) unless you zoom out and then zoom back in.
In this image, there are 3 seperate widgets (red, white and green respectively) in a single widget zone.
Also, when the mouse leaves the widget the widget config/move buttons are no longer visible.
One solution is to right-click on the widget and then scroll up to the config wheel but this is not something I want to tell my editors they have to do.
Has anyone else come across this problem and if so, how did they solve it?
This can happen when you have CSS conflicts. You can use Chrome Inspector, Firebug, or IE developer tool to investigate and see if anthing is 'overlapping' those buttons (often a floating div is overlapping the buttons and intercepting the 'click')
Then once you figure out a css class to make it work, just add it to your style sheet with ".EditMode " before it, this is a special class that is on the body when in page editor.
Example:
.EditMode .MyFloatingDivThatsCoveringTheWidgets {
z-index: 0;
}
As you can see, I'm trying to set the button's color to a very light blue, but by default everything but the bezels are being darkened. Is the default button behavior causing this? Is there a workaround besides creating your own button? If I do have to create my own button, how can I reuse the default button's animation behavior? Thanks.
You don't have to create a custom button.
Instead, create an image containing the color you want and use that as a background image. Plus make sure to set the button's background color to default (clearColor), otherwise you will lose the rounded corners.