jeudi 10 mars 2016

How do I fix a Wordpress met box that's blown out by it's content?

What is causing the meta box in the the screenshot below to not bound it's content? And how do I get it to expand and contain the checkbox containing divs?

I've included the meta box and the css below.

Thank you for your time and consideration,

Tim

Figure 1.

Meta box is not bounding the option checkboxes

Meta box function

function _mpact_meta_box() {

        printf( '<p><label for="%s">%s</label></p>', '_mpact_description', __('Select the applicable options', 'mpact_plugin') );
        ?>
            <div class="mpact-container">
            <div class="mpact-row mpact-one-half mpact-firstcol mpact-left">
                <label for="meta-checkbox">
                    <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-1'][0], 'yes' ); ?> />
                    <?php _e( 'Option 1', 'mpact_plugin' )?>
                </label><br />
                <label for="meta-checkbox-two">
                    <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-2'][0], 'yes' ); ?> />
                    <?php _e( 'Option 2', 'mpact_plugin' )?>
                </label><br />
                <label for="meta-checkbox">
                    <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-3'][0], 'yes' ); ?> />
                    <?php _e( 'Option 3', 'mpact_plugin' )?>
                </label><br />
                <label for="meta-checkbox-two">
                    <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-4'][0], 'yes' ); ?> />
                    <?php _e( 'Option 4', 'mpact_plugin' )?>
                </label>
            </div>
            <div class="mpact-row mpact-one-half mpact-gutter mpact-left">
                &nbsp;
            </div>
            <div class="mpact-rows mpact-one-half mpact-secondcol mpact-left">
                <label for="meta-checkbox">
                    <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-1'][0], 'yes' ); ?> />
                    <?php _e( 'Option 5', 'mpact_plugin' )?>
                </label><br />
                <label for="meta-checkbox-two">
                    <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-2'][0], 'yes' ); ?> />
                    <?php _e( 'Option 6', 'mpact_plugin' )?>
                </label><br />
                <label for="meta-checkbox">
                    <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-1'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-3'][0], 'yes' ); ?> />
                    <?php _e( 'Option 7', 'mpact_plugin' )?>
                </label><br />
                <label for="meta-checkbox-two">
                    <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes" <?php if ( isset ( $prfx_stored_meta['mpact-meta-checkbox-2'] ) ) checked( $prfx_stored_meta['mpact-meta-checkbox-4'][0], 'yes' ); ?> />
                    <?php _e( 'Option 8', 'mpact_plugin' )?>
                </label>
            </div>
            </div>
        <?php
    }

The CSS

.mpact_plugin {
    width: 100%;
    position: absolute;
}

.mpact_plugin:after {
    content:".";
    display:block;
    clear:both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.mpact-container {
    width: 100%;
    position: absolute;
}

.mpact-container:after {
    content:".";
    display:block;
    clear:both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.mpact-left {
    float: left;
}

.mpact-right {
    float: right;
}

.mpact-one-half {
    width: 48%;
}

.mpact-row.mpact-one-half.mpact-firstcol {

}

.mpact-row.mpact-one-half.mpact-secondcol {

}   

.mpact-row.mpact-gutter{
    width:4%;
}



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire