Use unused footer space for content\body bootstrap modal 2.3.2

Greetings experts,
Does anyone have a .css combination to prevent unused footer space in a bootstrap modal? I need the body height and width to be 100%. There is no need for a footer. Yet any combination I have tried still leaves unused footer space.
<div class="row">
        <div id="EditModal'" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="EditOpsModal" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Edit Items</h4>
                </div>
                <div class="modal-body" id="mdlEditForm">

                </div>
            </div>
        </div>
    </div>

 $('#EditModal').on('show.bs.modal', function() {

        }).css({
            width: '100%',
            height: '100%',
            left: '50%',
            bottom: '0%',

        'margin-left': function() {
             return -($(this).width() / 2);
            }
        });

Open in new window

Focker513Asked:
Who is Participating?
 
Focker513Author Commented:
Okay so the problem was resolved by placing the model div tag with the following .css files and omitting the jquery css implementation:
 #EditModal {
        width: 98%;
        height: 92%;
        padding: 0;
        left: 50%;
        position: relative;
        top: 5%;
    }

        #EditModal .modal-body {
            position: relative;
            max-height: 100%;
            padding: 15px;
            overflow-y: auto;
            overflow-x: auto;
            margin-bottom: 0 !important;
        }

Open in new window


I saw plenty of examples for doing this for bootstrap 3 but had to brute force this using chrome and dynamically coming up with the proper cocktail oc .css for the bootstrap 2.3.2 modal. The actual culprit for the whitespace showing below the footer was the position attribute. Although, I never explicitly set it to fixed...Once I set it explicitly to relative, the whitespace went away.
0
 
RobOwner (Aidellio)Commented:
Is there a reason you're still on 2.3.2 (no longer supported) when 3.3.4 has been released?

Do you have a link to your site, save me recreating a test environment?
0
 
RobOwner (Aidellio)Commented:
http://jsbin.com/xefuga/1/edit?html,css,output

#EditModal .modal-footer {
  display: none;
}
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Focker513Author Commented:
Reason = doing what I'm told.
Sorry, it is an internal site.

I may try to mock it out later today and send up a jsfiddle.
I am injection a partial view into this modal. It is using jquery datatables which are ajax sourced so it may be difficult.
I did try your css recommendation and it did not solve the issue. If you can think of anything else in the interim I will give it a try.
0
 
RobOwner (Aidellio)Commented:
Usually a good enough reason *grin*

I'm not sure I'm understanding exactly where the unwanted footer space is. Certainly a demo in jsbin/jsfiddle would be great
0
 
Focker513Author Commented:
I am curious if it could be the "bottom" attribute of the modal-body.
I will look into that and see what I find. Thanks.
0
 
RobOwner (Aidellio)Commented:
Glad you worked it out :)
0
 
Focker513Author Commented:
This certainly is not the fault of the contributing expert. I had little info I could provide but the ultimate resolution was solely determined by me.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.