Search jQuery

jQuery Forum

Modal Dialog - Adding space at the bottom of the page

in Using jQuery UI • 3 years ago

Hey guys,

When the Dialog appears on the page, it adds a space at the bottom of the page, which isn't covered by the overlay. I've heavily styled the dialog box, so could this have something to do with it? My code is...

JS

$("#register").dialog({
modal: true,
width: 791,
height: 495,
autoOpen: true,
resizable: false
});
$('#reg_link').click(function(){
$("#register").dialog('open');
return false;
});
$('#reg_pop_close').click(function(){
$("#register").dialog('close');
return false;
});

HTML

<div id="register" title="Register">
<div class="top"></div>
<div class="mid">
<div class="cont">
<a href="#" id="reg_pop_close"><img src="images/cross.png" alt="Close" /></a>
<p class="ttl">Register with the ActivCoventry Community</p>
<p class="deets">Facilisi nam liber tempor cum soluta nobis eleifend option congue. Laoreet dolore magna aliquam erat volutpat ut wisi enim ad minim veniam quis nostrud. Decima eodem modo typi qui nunc nobis videntur</p>
<img src="images/reg_box_ipod_ban.png" alt="Win an iPod!" />
<img src="images/example_emails.png" alt="Example Emails" class="example_emails" />
<form action="#" method="post" class="reg_form">
<ul>
<li>Facilisi nam liber tempor cum soluta nobis eleifend option congue. Laoreet dolore mag na aliquam.</li>
<li>Quam littera gothica quam nunc putamus parum claram. Dolor in hendrerit in vulputate velit esse molestie consequat vel, illum dolore eu.</li>
<li>Option congue nihil imperdiet doming id quod mazim placerat facer.</li>
<li>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet.</li>
</ul>
<p><label for="reg_name">Your Name:</label><br />
<input type="text" class="text" id="reg_name" name="reg_name" />
</p>
<p><label for="reg_email">Your Email:</label><br />
<input type="text" class="text" id="reg_email" name="reg_email" />
</p>
<p><input type="checkbox" name="reg_tandc" id="reg_tandc"> <label for="reg_tandc">I have a read and understood the <a href="#">Terms and Conditions</a></p>
<p class="submit"><input type="hidden" name="reg_submit" value="Submit" /><input type="image" src="images/reg_btn.png" class="btn" name="reg_submit_btn" value="Submit" /> <a href="#"><span>We respect your privacy</span></a></p>
</form>
</div>
</div>
<div class="clear"></div>
<div class="btm"></div>
</div>

CSS

#register {
display: none;
}
#register .top {
background: url(../images/reg_top_bg.png) no-repeat left top;
padding: 14px 0 0 0;
}
#register .mid {
background: url(../images/reg_mid_bg.png) repeat-y left top;
padding: 0 14px 0 14px;
float: left;
}
#register .cont {
padding: 22px;
background: #FFF;
position: relative;
float: left;
}
#register .cont .example_emails {
float: left;
}
#register #reg_pop_close {
position: absolute;
top: 5px;
right: 5px;
}
#register .cont .reg_form {
width: 400px;
float: right;
}
#register .cont .reg_form ul {
list-style: none;
}
#register .cont .reg_form ul li {
background: url(../images/tick.png) no-repeat left top;
padding: 0 0 0 20px;
margin: 0 10px 10px 0;
width: 170px;
float: left;
text-align: left;
font-size: 1.1em;
line-height: 1.1em;
font-family: Helvetica, Arial, sans-serif;
color: #353535;
}
#register .cont .reg_form p {
font-size: 1.1em;
line-height: 1.1em;
font-family: Helvetica, Arial, sans-serif;
color: #353535;
text-align: left;
}
#register .cont .reg_form p a {
color: #F27E37;
}
#register .cont .reg_form p.submit a span {
position: relative;
top: -10px;
}
#register .cont .reg_form input.text {
width: 320px;
border: 1px solid #7F9DB9;
margin: 3px 0 0 0;
}
#register .btm {
background: url(../images/reg_btm_bg.png) no-repeat left top;
padding: 14px 0 0 0;
}
#register p.ttl {
text-align: left;
font-size: 2.2em;
font-family: Helvetica, Arial, sans-serif;
color: #353535;
font-weight: bold;
}
#register p.deets {
text-align: left;
font-size: 1.2em;
line-height: 1.2em;
font-family: Helvetica, Arial, sans-serif;
color: #353535;
}

Thats a fair amount of code I know, but I thought I'd give you guys the lot. The space it adds at the bottom looks like its the same height as the dialog box.

Any thoughts?

Thanks,

Tom

Replies(2)

moogleii

Re: Modal Dialog - Adding space at the bottom of the page

3 years ago

Check .ui-dialog in the ui.dialog.css or your custom theme css. Mine had position:relative (perhaps from an older version?). With 1.8, i think it should be position: absolute;.

magleahy

Re: Modal Dialog - Adding space at the bottom of the page

3 years ago

Hi all,

I have had a similar situation where the dialog was opening where it should on the page, but the user was redirected to the bottom of the page (in IE if I remember correctly). Basically, I forgot to include the appropriate css to match the jQuery UI JavaScript library. By doing this everything was ok. I imagine it's something like that, where there are styles set on elements on the jQuery css that are not set in your own css.

To debug the problem so I didn't have to include the whole jQuery UI css, I made two identical pages, one using the jQuery UI css and one not and just checked what was different in the css via Firebug on Firefox and added these styles to my css.

Hope it helps.
Mag

Top Reply

Response title

Attachments

jQuery Forum

Modal Dialog - Adding space at the bottom of the page

Replies(2)

Re: Modal Dialog - Adding space at the bottom of the page

Re: Modal Dialog - Adding space at the bottom of the page

Statistics

Tags

Actions

Related Posts