Color picker layout breaking in Chrome & Firefox browsers (Windows 8)

Sorry for the late answer…

I can’t check this in Windows 8. On Windows 7 and Windows 10 i checked that the color picker is working fine.

Did you get any news?

Agree with Jamie.
The layout is broken on Chrome as well as Firefox.
I have tested it on WordPress 4.7 as well as 4.8.
I tested it with only this and ACF installed. The theme installed on my installation was DIVI. So I tested with Twenty-fifteen, Twenty-sixteen and Twenty-seventeen as well.
But the result is same…the layout is broken

Here is the screenshot
My operating system is WIndows 7.

I believe the layout is being broken, because IRIS colorpicker is setting a fixed width for the picker container which leaves no space for the opacity bar.

See here

The iris-picker is setting a width of 255px for itself. With margins and the widths of the strips coming into play, the opacity bar is bushed downwards because of nospace.
If I increase the width of iris-picker by 1 pixel to 256px, the layout gets fixed

@shariqkhan2012 Thanks for the informations.

Could you please add this css to the acf-rgba-color-picker.css and try if this fix the problem:

.acf-field-extended-color-picker .iris-picker.iris-border {
	width: 260px!important;
}

If this solves the behavior, I could do an update to the plugin.

Wow, that was quick!

I have already used the following CSS code and it fixes the issue:

.wp-picker-container .iris-picker {
	max-width:100%;
	width:260px !important;
}

The reason I chimed in the forum is not everyone is a developer and might have troubles adding this CSS rule.

But if you are going to push an update ith this rule, its great.
Thank you for the awesome add-on and for your contribution to the coomunity. Much appreciated!

• This reply was modified 7 years, 5 months ago by Shariq Khan.

Just checked your code and it works as well.
On second thoughts, I think your code is better because it specifically targets the iris only when your add-on is in action.

• This reply was modified 7 years, 5 months ago by Shariq Khan.

Thanks for testing. I will push an update soon…

You are welcome. Though I must add that I tested it in only Chrome and Firefox on Windows 7.
Probably it will require some testing on other browsers too.