How do I fix a WordPress meta 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.

Read More

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%;
}

Related posts

1 comment

  1. Remove floats and absolute postioning from your metabox style::

    .mpact_plugin {
      width: 100%;
    }
    .mpact-container {
      width: 100%;
    }
    .mpact-left,
    .mpact-right {
      display: inline-block;
    }
    .mpact-left {
      margin-right: 2%;
    }
    .mpact-one-half {
      width: 47%;
    }
    <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">Option 1</label>
        <br>
        <label for="meta-checkbox-two">
          <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes">Option 2</label>
        <br>
        <label for="meta-checkbox">
          <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes">Option 3</label>
        <br>
        <label for="meta-checkbox-two">
          <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes">Option 4</label>
      </div>
      <div class="mpact-rows mpact-one-half mpact-secondcol mpact-right">
        <label for="meta-checkbox">
          <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes">Option 5</label>
        <br>
        <label for="meta-checkbox-two">
          <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes">Option 6</label>
        <br>
        <label for="meta-checkbox">
          <input type="checkbox" name="mpact-meta-checkbox-1" id="mpact-meta-checkbox-1" value="yes">Option 7</label>
        <br>
        <label for="meta-checkbox-two">
          <input type="checkbox" name="mpact-meta-checkbox-2" id="mpact-meta-checkbox-2" value="yes">Option 8</label>
      </div>
    </div>

    You don’t need all the unnecessary styling, plus I’ve removed the unnecessary gutter empty div. You can achieve this with right margin. Also on your right div, you had left class, I changed that to right class .mpact-right.

Comments are closed.