Horizontal scroll bar in Jquery dialog is to low.
I have a asp.net application with a link on its master page that opens a Jquery dialog. It looks and is placed exactly as I want it except the horizontal scroll bar is about 4 px to low so that there is a space between the dialog content area and it. The horizontal scroll bar isn't even needed so my question is, is there a way to just have a vertical scroll bar and if not how do I get rid of the space?
I've attached the JavaScript that creates the dialog and the css that styles it. Any suggestions would be greatly appreciated.
I've attached the JavaScript that creates the dialog and the css that styles it. Any suggestions would be greatly appreciated.
div.ui-dialog
{
width: 420px !important;
background: url(../Images/PopupBackround.jpg) repeat;
}
div.ui-dialog-content
{
font-family: 'Lucida Calligraphy';
padding: 10px;
font-weight: bold;
color: #FFFF00;
min-height: 113px;
width: 400px !important;
text-align: center;/**/
}
div.ui-dialog-titlebar
{
width: 420px; /*Set the width of the title bar. It must be 20px more then the width of the content because the content has 10px padding*/
background: url('../Images/Dialog/titlebarRight.png') no-repeat right; /*Places a rounded graphic in the right of the title bar*/
height: 23px !important; /*Set the height of the title bar*/
position: relative; /*If this is not set the closing X will not be positioned correctly*/
}
span.ui-dialog-title
{
display: block;
font-size: 18px;
text-align: center;
height: 23px;
background: url('../Images/Dialog/titlebar.png') repeat-x top;
margin: 0 9px; /*Set the left and right margins of the title. If there is no margins the graphic set in the last line will go over the rounded end graphics.*/
position: relative;
padding-top: 1px;
font-weight: bold;
color: #00467F; /* Dark Blue*/
}
a.ui-dialog-titlebar-close
{
/*Configure the closing X*/
position: absolute;
top: 2px;
right: 10px;
font-size: large;
font-weight: bold;
color: #00467F; /*Dark Blue*/
text-decoration: none;
}
div.ui-dialog-container
{
background: url('../Images/Dialog/titlebarLeft.png') no-repeat top left; /*Places rounded graphic in the top left of the dialog (In the title bar)*/
}
div.ui-resizable-handle
{
/*If not set the shadow graphic could be resized.*/
z-index: -1 !important;
}
/*The following 7 style rules place a shadow graphic aroung the dialog box.*/
div.ui-resizable-nw
{
background: url('../Images/Dialog/Shadow/shadow_01.png') no-repeat top right !important;
width: 117px !important;
height: 112px !important;
top: -42px !important;
left: -62px !important;
}
div.ui-resizable-ne
{
background: url('../Images/Dialog/Shadow/shadow_03.png') no-repeat top left !important;
width: 115px !important;
height: 112px !important;
top: -42px !important;
right: -63px !important;
}
div.ui-resizable-e
{
background: url('../Images/Dialog/Shadow/shadow_06.png') repeat-y top left !important;
width: 117px !important;
height: auto !important;
top: 70px !important;
right: -65px !important;
bottom: 46px !important;
}
div.ui-resizable-se
{
background: url('../Images/Dialog/Shadow/shadow_14.png') no-repeat top right !important;
width: 117px !important;
height: 113px !important;
right: -65px !important;
bottom: -67px !important;
}
div.ui-resizable-s
{
background: url('../Images/Dialog/Shadow/shadow_08.png') repeat-x bottom !important;
width: 313px !important;
height: 111px !important;
right: -63px !important;
bottom: -65px !important;
left: 55px !important;
}
div.ui-resizable-sw
{
background: url('../Images/Dialog/Shadow/shadow_07.png') no-repeat top right !important;
width: 115px !important;
height: 111px !important;
bottom: -65px !important;
left: -60px !important;
}
div.ui-resizable-w
{
background: url('../Images/Dialog/Shadow/shadow_04.png') repeat-y top left !important;
width: 115px !important;
height: auto !important;
top: 70px !important;
bottom: 46px !important;
left: -60px !important;
}
div.ui-dialog-buttonpane
{
width: 400px;
text-align: center;
background-color: Black;
height: 20px;
vertical-align: middle;
padding: 5px 10px 12px 10px;
}
div.ui-dialog-buttonpane button
{
font-size: medium;
font-weight: bold;
color: #00467F; /*Dark Blue*/
}
a
{
color: #99FF33;
text-decoration: underline;
cursor: pointer;
}
function SetHelpDialog(x, y)
{
divHelp.innerHTML = Message;
$('div#divHelp').dialog({
height: "400px",
position: [x, y],
modal: true,
overlay: { background: '#fff', opacity: '0.7'}
});
$('div#divHelp').css("overflow", "scroll");
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello and thank you both for you input. This is an internal application and our company only uses IE 7 or 8 in which overflow-x works so I'm going with that.
I also looked at the other solution as I do indeed have a dive within the div that the dialog is created from but it is the outer dive that is fixed and the inner div that is auto. The inner div need to remain that way as the width varies depending on the content which depends on the user. I tried making the width of the container wider the the title bar but that didn't work.
I also looked at the other solution as I do indeed have a dive within the div that the dialog is created from but it is the outer dive that is fixed and the inner div that is auto. The inner div need to remain that way as the width varies depending on the content which depends on the user. I tried making the width of the container wider the the title bar but that didn't work.
Without having your html, I can't actually test this but I'm pretty sure that this may be because you have fixed width divs inside of div with auto width. Try setting fixed widths for all divs that are part of the dialiog. In particular, I'm guessing that you need to set the width of div.ui-dialog-container
to be greater than the width of the titlebar. In theory it should just need to be the same size but depending on the browser, there may be a default padding or margin that makes it a bit wider.