origgami / CMB2-grid

A grid system for Wordpress CMB2 library that allows columns creation
88 stars 21 forks source link

CSS conflicting with colorpicker component #21

Open noquierouser opened 8 years ago

noquierouser commented 8 years ago

Loading CMB2 Grid conflicts with colorpicker CSS. Probably related to box-sizing attribute.

Before clicking colorpicker 01

After clicking colorpicker 02

noquierouser commented 8 years ago

I found out the issue is originated in the Bootstrap CSS contained in the plugin.

.postbox-container .cmb2-wrap *, .postbox-container .cmb2-wrap {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

The way to fix this issue, at least how I managed to workaround this issue, is by enqueuing this CSS:

.wp-picker-holder * {
  box-sizing: content-box !important;
}

And setting it as dependant from CMB2 and CMB2 Grid styles:

wp_enqueue_style(
  'colorpicker_fix',
  plugins_url('lib/fix-cmb2-colorpicker-box-sizing.css', __FILE__),
  array('cmb2-styles', 'cmb2_grid_bootstrap_light') // here we set its dependencies
);
pablo-sg-pacheco commented 8 years ago

Thanks.

The ideal would be to edit the bootstrap css. Have an idea of what could be the change?