WP 3.8 styles conflict with Live Edit

• planktonwebdesign

• December 13, 2013 at 1:12 pm

Bit of a bugger and you’ve probably seen but the new WP 3.8 checkbox and radio buttons need to be set to width 25px rather than auto.

I popped this into my custom script for site, also unfixing the cancel and update buttons from the bottom of slide out as you can get to them on mobile.

`
$(‘iframe#live_edit-iframe’).load( function() {

$(‘iframe#live_edit-iframe’).contents().find(“head”)
.append($(“<style type=’text/css’>

ul.acf-radio-list li input, ul.acf-checkbox-list li input {width: 25px !important;}
#field-save{position: relative !important; box-shadow: none;} #wpwrap{background: #F9F9F9; box-shadow: none;}
html,#live_edit-iframe{background: #f9f9f9;}

</style>”));
});

• Elliot

• December 15, 2013 at 5:33 pm

Hi @planktonwebdesign

Thanks for the bug report.
I’ll take a look.

Cheers
E

• jvwrx

• March 14, 2015 at 6:58 am

This still seems to be an issue on mobile/tablet view:

Screenshot: http://take.ms/dt2Ct

My workaround is similar to @planktonwebdesign, adding the following to an admin CSS file:

@media screen and (max-width: 782px) {
  ul.acf-radio-list li input,
  ul.acf-checkbox-list li input	{ width: 25px !important; }
}

Thanks!