humanmade/Custom-Meta-Boxes

.cmb-row shows weird margin on Chrome

Closed this issue · 2 comments

In Chrome, the (first?) .cmb-row shows a weird right margin, causing content not to align correctly and/or not to expand to the full width of the meta box.

Removing overflow: hidden seems to remedy this. Perhaps there is another solution?

pasted_image_10_02_17_18_24

Removing the negative margins from the containing .postbox>.inside>.cmb_metabox seems to get rid of the issue as well.

As that margin appears to be there for the sake of prettier top alignment, something along these lines would get rid of the quirky Chrome behaviour, to the same effect:

/*
 * Set overflow-hidden on the parent element in stead.
 */
.postbox>.inside>.cmb_metabox {
    overflow: hidden;
}

/*
 * Remove overflow: hidden, it is now applied to its parent.
 */
.cmb_metabox .cmb-row {
    margin: 0 -5px;
    zoom: 1;
}

/*
 * To compensate for the missing negative top margin,
 * pull up the first row.
 */
.cmb_metabox .cmb-row:first-child {
	margin-top: -10px;
}

/*
 * Same here for bottom margin:
*/
.cmb_metabox .cmb-row:last-child {
	margin-bottom: -10px;
}

Closing this as does not occur on branch develop.