problem with option type "rgba-color-picker" after updating to v2.7.9

[emranio]

After updating to 2.7.9, the rgba-color-picker type ain't working properly. all it shows a blank space. i've attached an screenshot and code. Please take a look.
Note: i'm testing with previous version (2.7.8) which is working fine.

'color_xyz' => array(
            'label' => __('color s', 'eventcastle'),
            'desc' => __('Select the background color', 'eventcastle'),
            'value' => '',
            'type' => 'rgba-color-picker'
        ),

[ViorelEremia]

Inspect why is it happening? I tested with your code and is fine in my end.

[liondekam]

We can report the same issue. After updating to 2.7.9 on chrome issue appears.
Seems some script hide input field.
http://d.pr/i/xEgiBH

[liondekam]

Seems other users already reported this issue 3 days ago
#2991

We can send you credentials for installation where issue appears.

[ViorelEremia]

@liondekam drop here: viorel [ a ] themefuse [ dot ] com

[emranio]

I've added a few line of CSS and it fixed the rgba-color-picker issue. Hopefully it will help to solve issue permanently.

.fw-backend-option-input-type-rgba-color-picker .wp-color-result{
	display: block;
	width: 45px !important;
	height: 16px !important;
	position: relative;
}

Also, the predefined color palates looks mis-sized because of the following CSS:

.fw-backend-option-input-type-rgba-color-picker .iris-palette {
    height: 33px !important;
    width: 33px !important;
}

:)

[ViorelEremia]

Guys can someone tell me wtf is with this option type. I tested with some themes and everything is fine.

[pear1]

Some issue here and for multiple other Unyson users.
Waiting for the fix, because CSS snippets doesn't work so well.

[ViorelEremia]

@pear1 the problem will not be fixed because I can not see it, if you want to be fixed give me more information. It would be good today because it will be an update for unyson.

[pear1]

@ViorelEremia What kind of information do you need?

[ViorelEremia]

would be ideal if i had ftp and admin credentials from a site what has this issue

[pear1]

At the moment I don't have any test server to give credentials (only local), but I can set it up for your test site if that is possible.

[ViorelEremia]

Can you inspect who rewrites the styles

[pear1]

Can you please try this bellow?

1. Install clean WordPress installation
2. Install stratch-parent theme
3. Install Unyson (from WordPress.org directly, not master)
4. Go to: Appearance - Theme Settings - Demo Options - RGBA Color Picker
   

Like this example it isn't working in all cases for me and others.

[ViorelEremia]

[pear1]

Are you using Unyson version directly from WordPress.org?

[pear1]

If it still doesn't work, where can I send WordPress login data? (I will create installation for you)

[pear1]

@ViorelEremia Did you manage to replicate it?

[ViorelEremia]

@pear1 can you try this css in: plugins\unyson\framework\includes\option-types\rgba-color-picker\static\css\styles.css
.fw-backend-option-input-type-rgba-color-picker .fw-option-help-in-input { top: 2px !important; } .fw-backend-option-input-type-rgba-color-picker .wp-picker-holder { position:absolute; z-index:99999; } .fw-backend-option-input-type-rgba-color-picker .wp-picker-clear { height: 23px !important; } .fw-backend-option-input-type-rgba-color-picker .wp-color-result { height: auto; box-shadow:none; } .fw-backend-option-input-type-rgba-color-picker input { max-width: 140px !important; } #customize-controls .customize-pane-child .customize-control:last-child .fw-backend-customizer-option .fw-backend-option-type-rgba-color-picker { padding-bottom: 220px; } /* Picker WP style */ .wp-color-result { background-color: #f7f7f7; border: 1px solid #ccc; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; height: 22px; margin: 0 6px 6px 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: bottom; display: inline-block; padding-left: 30px; -webkit-box-shadow: 0 1px 0 #ccc; box-shadow: 0 1px 0 #ccc; top: 0; } .wp-color-result:focus, .wp-color-result:hover { background: #fafafa; border-color: #999; color: #23282d; } .wp-color-result:after { background: #f7f7f7; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; border-left: 1px solid #ccc; color: #555; content: attr(title); display: block; font-size: 11px; line-height: 22px; padding: 0 6px; position: relative; right: 0; text-align: center; top: 0; } .wp-color-result.wp-picker-open:after { content: attr(data-current); } .wp-color-result:focus:after, .wp-color-result:hover:after { color: #23282d; border-color: #a0a5aa; border-left: 1px solid #999; } .wp-picker-open+.wp-picker-input-wrap { display: inline-block; vertical-align: top; } .wp-picker-container input[type=text].wp-color-picker { width: 65px; height: 25px; font-size: 12px; font-family: monospace; line-height: 16px; margin: 0; } .wp-picker-container .button { margin-left: 6px; }

[pear1]

It is working now, but color picker layout still is somewhat broken.

[ViorelEremia]

@pear1 Try to remove cahse browser is still the same

[pear1]

Yes, it still is the same.
But at the moment the only issue is with those color block sizes, other than that everything works just fine.

[ViorelEremia]

@pear1 Can you inspect who is overwrite styles for colors

[pear1]

Yes, here you can see that.
(unyson/framework/includes/option-types/rgba-color-picker/static/css/styles.css)

[ViorelEremia]

@pear1 Remove all css from: plugins\unyson\framework\includes\option-types\rgba-color-picker\static\css\styles.css
and replace all with:
.fw-backend-option-input-type-rgba-color-picker .fw-option-help-in-input { top: 2px !important; } .fw-backend-option-input-type-rgba-color-picker .wp-picker-holder { position:absolute; z-index:99999; } .fw-backend-option-input-type-rgba-color-picker .wp-picker-clear { height: 23px !important; } .fw-backend-option-input-type-rgba-color-picker .wp-color-result { height: auto; box-shadow:none; } .fw-backend-option-input-type-rgba-color-picker input { max-width: 140px !important; } #customize-controls .customize-pane-child .customize-control:last-child .fw-backend-customizer-option .fw-backend-option-type-rgba-color-picker { padding-bottom: 220px; } /* Picker WP style */ .wp-color-result { background-color: #f7f7f7; border: 1px solid #ccc; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; height: 22px; margin: 0 6px 6px 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: bottom; display: inline-block; padding-left: 30px; -webkit-box-shadow: 0 1px 0 #ccc; box-shadow: 0 1px 0 #ccc; top: 0; } .wp-color-result:focus, .wp-color-result:hover { background: #fafafa; border-color: #999; color: #23282d; } .wp-color-result:after { background: #f7f7f7; -webkit-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; border-left: 1px solid #ccc; color: #555; content: attr(title); display: block; font-size: 11px; line-height: 22px; padding: 0 6px; position: relative; right: 0; text-align: center; top: 0; } .wp-color-result.wp-picker-open:after { content: attr(data-current); } .wp-color-result:focus:after, .wp-color-result:hover:after { color: #23282d; border-color: #a0a5aa; border-left: 1px solid #999; } .wp-picker-open+.wp-picker-input-wrap { display: inline-block; vertical-align: top; } .wp-picker-container input[type=text].wp-color-picker { width: 65px; height: 25px; font-size: 12px; font-family: monospace; line-height: 16px; margin: 0; } .wp-picker-container .button { margin-left: 6px; }

[pear1]

Thanks, it works great.
Please include that in this update.